上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个法式将有助于深入组件的开发。此外，在子组件中界说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; }

个浏览器对<template>标签的撑持情况，请参见：

编译感化域

尽管使用组件就像使用一般的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="http://www.mamicode.com/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

为了让组件可以组合，我们需要一种方法来混合父组件的内容与子组件本身的模板。这个措置惩罚惩罚称为内容分发，Vue.js 实现了一个内容分发 API，，使用特殊的 <slot> 元素作为原始内容的插槽。

如果不理解这段话，可以先跳过，你只要知道<slot>元素是一个内容插槽。

单个Slot