上一篇分分钟玩转Vue.js组件中我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。”
今天我们将着重介绍slot和父子组件之间的访问和通信，slot是一个非常有用的东西，它相当于一个内容插槽，它是我们重用组件的基础。Vue的事件系统独立于原生的DOM事件，它用于组件之间的通信。
本文的主要内容如下：
组件的编译作用域
在组件template中使用<slot>标签作为内容插槽
使用$children, $refs, $parent 实现父子组件之间的实例访问
在子组件中，使用$dispatch向父组件派发事件；在父组件中，使用$broadcast向子组件传播事件
结合这些基础知识，我们一步一步实现一个CURD的示例
Demo和源代码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！
注意：以下示例的组件模板都定义在<template>标签中，然而IE不支持<template>标签，这使得在IE中<template>标签中的内容会显示出来。解决办法——隐藏<template>标签
template{ display: none; }
编译作用域
尽管使用组件就像使用一般的HTML元素一样，但它毕竟不是标准的HTML元素，为了让浏览器能够识别它，组件会被解析为标准的HTML片段，然后将组件的标签替换为该HTML片段。
<div> <my-component> </my-component> </div> <template> <div> <h2>{{ msg }}</h2> <button v-on:click="showMsg">Show Message</button> </div> </template> <script src="https://www.jb51.net/js/vue.js"></script> <script> new Vue({ el: '#app', components: { 'my-component': { template: '#myComponent', data: function() { return { msg: 'This is a component!' } }, methods: { showMsg: function() { alert(this.msg) } } } } })
这段代码定义了一个my-component组件，<my-component><my-component>不是标准的HTML元素，浏览器是不理解这个元素的。
那么Vue是如何让浏览器理解<my-component><my-component>标签的呢？（下图是我个人的理解）
在创建一个Vue实例时，除了将它挂载到某个HTML元素下，还要编译组件，将组件转换为HTML片段。
除此之外，Vue实例还会识别其所挂载的元素下的<my-component>标签，然后将<my-component>标签替换为HTML片段。
实际上浏览器仍然是不理解<my-component>标签的，我们可以通过查看源码了解到这一点。
组件在使用前，经过编译已经被转换为HTML片段了，组件是有一个作用域的，那么组件的作用域是什么呢？
你可以将它理解为组件模板包含的HTML片段，组件模板内容之外就不是组件的作用域了。
例如，my-component组件的作用域只是下面这个小片段。
组件的模板是在其作用域内编译的，那么组件选项对象中的数据也应该是在组件模板中使用的。
考虑下面的代码，在Vue实例和组件的data选项中分别追加一个display属性：
new Vue({ el: '#app', data: { display: true }, components: { 'my-component': { template: '#myComponent', data: function() { return { msg: 'This is a component!', display: false } }, methods: { showMsg: function() { alert(this.msg) } } } } })
然后在my-component标签上使用指令v-show="display"，这个display数据是来源于Vue实例，还是my-component组件呢？
<div> <my-component v-show="display"> </my-component> </div>
答案是Vue实例。
至此，我们应该认识到组件的作用域是独立的：
父组件模板的内容在父组件作用域内编译；
子组件模板的内容在子组件作用域内编译
通俗地讲，在子组件中定义的数据，只能用在子组件的模板。在父组件中定义的数据，只能用在父组件的模板。如果父组件的数据要在子组件中使用，则需要子组件定义props。
使用Slot