演示
本节要实现的是一个模态框组件，效果如下：
主要功能如下：
用户点击按钮，激活模态框
模态框可以自定义消息
提供关闭模态框的按钮
参考的 bulma 样式如下：
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<!-- 自定义模态框内容 -->
</div>
<button class="modal-close"></button>
</div>实现
首先，是用户点击按钮，显示模态框：
<div id="root" class="container">
<button type="button" class="button is-primary" @click="show()">显示</button>
<zen-modal v-if="showModal"></zen-modal>
</div>
<script type="text/javascript">
Vue.component('zen-modal',{
template: `
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<slot>默认模态框内容</slot>
</div>
</div>
<button class="modal-close"></button>
</div>
`
});
var vm = new Vue({
el:"#root",
data: {
showModal:false
},
methods:{
show(){
this.showModal = true;
}
}
});
</script>到这一步，用到的都是前几讲学过的知识：
使用
slot占位；通过
v-if来决定模态框是否显示；
难点就在于模态框的关闭，这个过程涉及到了「组件与实例之间的交互」：用户点击关闭按钮（组件）后，要向父实例传递一个信号，令其不显示组件。
这个与上一节学过的相反：上一节是实例通过属性方式传递数据给组件（使用 props），这一节则是组件传递数据给实例。Vue 提供了解决方案：
组件中使用
$emit来触发事件；实例中使用
v-on来监听该事件
完整实例如下：
<body>
<div id="root" class="container">
<button type="button" class="button is-primary" @click="show()">显示</button>
<zen-modal v-if="showModal" @fireclose="showModal = false"></zen-modal>
</div>
<script type="text/javascript">
Vue.component('zen-modal',{
template: `
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<slot>默认模态框内容</slot>
</div>
</div>
<button class="modal-close" @click="$emit('fireclose')"></button>
</div>
`
});
var vm = new Vue({
el:"#root",
data: {
showModal:false
},
methods:{
show(){
this.showModal = true;
}
}
});
</script>说明：
用户点击关闭模态框时候，触发「fireclose」事件；
父实例监听该事件，设置
showModal的值为false；
总结一下组件的内部通信（即组件与它的实例）：
实例传递数据给组件：用
props声明组件传递数据给实例：用
$emit与v-on
附录：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。