分钟播放Vue.js组件(2)

摘要

在播放Vue.js组件的最后一分钟，我们重点介绍了组件的创建、注册和使用。掌握这些步骤将有助于深化组件的开发。另外，在子组件中定义道具可以让父组件的数据传递下去，就像子组件告诉父组件：“嘿，兄弟，我开了个帖子，你在帖子里放点东西我就能拿到。”

今天，我们将重点讨论插槽和父子组件之间的访问和通信。槽是一个非常有用的东西，相当于一个内容槽，是复用组件的基础。Vue的事件系统独立于原生DOM事件，用于组件之间的通信。

本文的主要内容如下：

组件的编译范围使用槽标记作为组件模板中的内容槽，使用$children、$refs、$parent实现父子组件之间的实例访问，使用$dispatch将事件调度到子组件中的父组件。在父组件中，使用$broadcast将事件传播到子组件。结合这些基础知识，我们一步一步实现了一个示例Demo和code的源代码，并放在GitHub中。如果你觉得这篇文章不错，请点赞或者给GitHub加个星！

示例对话框组件1示例对话框组件2示例对话框组件3示例调度事件示例广播事件示例CURD示例GitHub Source

注意：以下示例的组件模板都是在模板标签中定义的，但是IE不支持模板标签，使得模板标签的内容在IE中显示。变通方法——隐藏模板标签

模板{ display: none}浏览器支持模板标签，请参见：http://caniuse.com/

编译范围

虽然使用组件就像使用普通的HTML元素一样，但它毕竟不是标准的HTML元素。为了让浏览器识别它，组件将被解析成一个标准的HTML片段，然后组件的标签将被这个HTML片段替换。

div id=' app ' my-component/my-component/div template id=' my component ' div H2 { { msg } }/H2按钮v-: click=' showMsg ' show Message/button/div/template script src=' http : js/Vue . js '/script script new Vue({ El : ' # app '，component s : { ' my-component ' 3: { template 33: ' # my component '，data:}}，方法： { showmsg 3360 function(){ alert(this。msg)}}})这段代码定义了一个my-component，它不是一个标准的HTML元素，浏览器不理解这个元素。那么Vue是如何让浏览器理解my-componentmy-component标签的呢？(下图是我个人的理解)

创建Vue实例时，除了在HTML元素下挂载之外，还需要编译组件并将其转换为HTML片段。此外，Vue实例识别挂载元素下的my-component标记，然后用HTML片段替换my-component标记。

实际上，浏览器仍然不理解我的组件标签，这一点我们可以通过查看源代码来了解。

使用前，组件已经编译后转换成HTML片段，组件有作用域。组件的范围是什么？您可以将其理解为组件模板中包含的HTML片段，组件的范围不超出组件模板的内容。例如，my-component组件的范围只是下面的一小部分。

组件的模板是在其范围内编译的，因此组件选项对象中的数据也应该在组件模板中使用。考虑以下代码，向Vue实例和组件的数据选项添加显示属性：

new Vue({ el: '#app '，data: { display: true }，components : { ' my-component ' : { template : ' # my component '，data : function(){ return { msg : '这是一个组件！'，显示：