Vue 2.0 入门系列（7）组件实例之模态框

演示

本节要实现的是一个模态框组件，效果如下：

主要功能如下：

• 用户点击按钮，激活模态框

• 模态框可以自定义消息

• 提供关闭模态框的按钮

参考的 bulma 样式如下：

实现

首先，是用户点击按钮，显示模态框：

    显示
    

到这一步，用到的都是前几讲学过的知识：

• 使用 slot 占位；

• 通过 v-if 来决定模态框是否显示；

难点就在于模态框的关闭，这个过程涉及到了「组件与实例之间的交互」：用户点击关闭按钮（组件）后，要向父实例传递一个信号，令其不显示组件。

这个与上一节学过的相反：上一节是实例通过属性方式传递数据给组件（使用 props），这一节则是组件传递数据给实例。Vue 提供了解决方案：

• 组件中使用 $emit 来触发事件；

• 实例中使用 v-on 来监听该事件

完整实例如下：

    

        显示
        
    

    

说明：

• 用户点击关闭模态框时候，触发「fireclose」事件；

• 父实例监听该事件，设置 showModal 的值为 false；

总结一下组件的内部通信（即组件与它的实例）：

• 实例传递数据给组件：用 props 声明

• 组件传递数据给实例：用 $emit 与 v-on

---

附录：

• 源码