vue商城项目父组件与子组件数据传递
程序员文章站
2022-07-02 22:53:22
...
父组件可以传递信息到子组件,但子组件不能随意改变这个状态
子组件的状态只能是父组件传递过来,不能是子组件自己改变
子组件修改状态值时不能够影响到子组件
父组件传到子组件
子组件是一个通用的模态框
Modal.vue
<div><div class="md-modal modal-msg md-modal-transition"v-bind:class="{'md-show':mdShow}" >
<div class="md-modal-inner">
<div class="md-top">
<button class="md-close" @click="closeModal">Close</button>
</div>
<div class="md-content">
<div class="confirm-tips">//可改变
<slot name="message"></slot>//插槽,
</div>
<div class="btn-wrap">//可改变
<slot name="btnGroup"></slot>//插槽
</div>
</div>
</div>
</div>
<div class="md-overlay" v-if="mdShow" @click="closeModal"></div>
</div>
父组件是一个商品界面
GoodList.vue
调用子组件的准备
<modal><modal>
import Modal from './../components/Modal'
...
export default {
components:{
Modal
},
}
插槽引用
<modal v-bind:mdShow="mdShow" v-on:close="closeModal">
<p slot="message">
请先登录,否则无法加入到购物车!
</p>
<div slot="btnGroup">
<a class="btn btn --m" href="javascript:;" @click="mdShow = false">关闭</a>
</div>
</modal>
mdShow控制变量的显示隐藏,默认是false,不显示
当未登录加入购物车时
this.mdShow = true;
子组件Modal.vue
通过 props:[“mdShow”],接收变量
此时只能是父组件传递到子组件属性
子组件传递到父组件
首先在子组件定义closeModal()方法,这个方法要关闭模态框
通过$emit触发父组件的close事件,通知父组件的作用
methods{
closeModal(){
this.$emit("close");
//相当于jQuery的trigger.("click")
}
}
在父组件定义了一个close事件
当事件触发时,关闭窗口
v-on:close="closeModal"
closeModal(){
this.mdShow = false;
//this.mdShowCart = false;
}