标签：modal 挂载 mode 实现 script eth als class turn
为了能够在父子组件中实现双向控制，需要以下的步骤：
第一步：子组件中挖坑
（1）在需要父组件填充具体内容的地方挖坑，方式为
<slot name="message"></slot>
通过slot和name指定坑
第二步：父组件中填坑（具体内容）
（1）引入子组件作为其中一个模块
在父组件的script中通过import引入，然后通过components进行挂载，最后以标签的形式使用
（2）在子组件模块区域内，使用slot="name的值"指定需要填的坑
<p slot="message">//填坑的内容 <span>加入购物车成功</span>
</p>
上述两步只是实现了组件简单内容的填充，但涉及到值的传递，及控制时还需如下的操作
（1）父组件中的值传递到子组件中：
子组件使用props拿到传递过来的值（在子组件的export default中）
此时父组件与值组件的代码为：
父组件：
<Modal v-bind:mdShow="mdShow" >//Modal是子组件在父组件中 <p slot="message"> 请先登录，否则无法加入购物车！ </p> </Modal> <script> import Modal from ‘@/components/Modal.vue‘ export default { data () { return { mdShow: false, } }, components: { Modal }, } </script>
子组件中代码为：
<div v-bind:class="{‘md-show‘:mdShow}"> <div class="confirm-tips">
<slot name="message"></slot>
</div> </div>
<script> export default{ props: ["mdShow"],//接受到来自父组件的值 data(){ return { } }, } } </script>
（2）子组件控制父组件中的值：实质上通过子组件的方法间接 通过$emit方法去调用父组件中的方法，
例如父组件有一个方法为close
<p v-on:close="closeModal"> <Modal v-bind:mdShow="mdShow" >//Modal是子组件在父组件中 <p slot="message"> 请先登录，否则无法加入购物车！ </p> </Modal> </p> <script> import Modal from ‘@/components/Modal.vue‘ export default { data () { return { mdShow: false, } }, components: { Modal }, methods:{ closeModel(){ this.mdShow = true; } } </script>
(2)子组件中需要触发父中绑定的close方法
<div v-bind:class="{‘md-show‘:mdShow}"> <div @clicki="closeModal">Close<div> <div class="confirm-tips"> <slot name="message"></slot> </div> </div> <script> export default{ props: ["mdShow"], data(){ return { } }, methods: { closeModal(){ this.$emit("close");//触发父组件中定义的方法 } } } </script>
初学阶段简单总结一下：子组件中挖坑，父组件填坑。
前面两步骤只是简单实现组件的加载，对于有值传递和控制，需要通过该后面两步的props接受来自父组件的值 和$emit触发父组件的方法实现。
标签：modal 挂载 mode 实现 script eth als class turn
原文地址：http://www.cnblogs.com/bfwbfw/p/7895067.html
