上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。”
今天我们将着重介绍slot和父子组件之间的访问和通信。slot是一个非常有用的东西，它相当于一个内容插槽，它是我们重用组件的基础。Vue的事件系统独立于原生的DOM事件，它用于组件之间的通信。
注意：组件模板都定义在<template>标签中，然而IE不支持<template>标签，这使得在IE中<template>标签中的内容会显示出来。
解决办法——隐藏<template>标签
template{
display: none;
}
一、编译作用域
尽管使用组件就像使用一般的HTML元素一样，但它毕竟不是标准的HTML元素，为了让浏览器能够识别它，组件会被解析为标准的HTML片段，然后将组件的标签替换为该HTML片段。
<div id="app">
<my-component>
</my-component>
</div>
<template id="myComponent">
<div>
<h2>{{ msg }}</h2>
<button v-on:click="showMsg">Show Message</button>
</div>
</template>
<script src="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 id="app">
<my-component v-show="display">
</my-component>
</div>
答案是Vue实例。
至此，我们应该认识到组件的作用域是独立的：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译
通俗地讲，在子组件中定义的数据，只能用在子组件的模板。在父组件中定义的数据，只能用在父组件的模板。如果父组件的数据要在子组件中使用，则需要子组件定义props。
二、使用Slot
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个处理称为内容分发，Vue.js 实现了一个内容分发 API，使用特殊的 <slot> 元素作为原始内容的插槽。如果不理解这段话，可以先跳过，你只要知道<slot>元素是一个内容插槽。
1、单个Slot
下面的代码在定义my-component组件的模板时，指定了一个<slot></slot>元素。
<div id="app">
<my-component v-show="display">
<h1>Hello Vue.js!</h1>
</my-component>
<my-component>
</my-component>
</div>
<template id="myComponent">
<div>
<h2>{{msg}}</h2>
<slot>如果没有分发内容，则显示slot中的内容</slot>
<button @click="showMsg">show Msg</button>
</div>
</template>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
display:true
},
components:{
"my-component":{
template:"#myComponent",
data:function(){
return {
msg:"myComponent",
display:false
}
},
methods:{
"showMsg":function(msg){
alert(this.msg);
}
}
}
}
})
</script>
第一个<my-component>标签有一段分发内容<h1>Hello Vue.js!</h1>，渲染组件时显示了这段内容。
第二个<my-component>标签则没有，渲染组件时则显示了slot标签中的内容。
简而言之，slot就是一个占位符，当template里面有内容时就把位置给它显示；当没有内容时，就默认显示slot里的内容。
2、指定名称的slot
上面示例是一个匿名slot，它只能表示一个插槽。如果需要多个内容插槽，则可以为slot元素指定name属性。
多个slot一起使用时，会非常有用。例如，对话框是HTML常用的一种交互方式。在不同的运用场景下，对话框的头部、主体内容、底部可能是不一样的。
//使用时，用name
<slot name="header"></slot>
//定义时
<header class="dialog-header" slot="header">
<h1 class="dialog-title">提示信息</h1>
</header>
三、父子组件之间的访问
有时候我们需要父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。针对这几种情况，Vue.js都提供了相应的API：
1、父组件访问子组件：使用$children或$refs
在父组件中，通过this.$children可以访问子组件。this.$children是一个数组，它包含所有子组件的实例。
组件个数较多时，我们难以记住各个组件的顺序和位置，通过序号访问子组件不是很方便。在子组件上使用v-ref指令，可以给子组件指定一个索引ID：
<template id="parent-component">
<child-component1 v-ref:cc1></child-component1>
<child-component2 v-ref:cc2></child-component2>
<button v-on:click="showChildComponentData">显示子组件的数据</button>
</template>
在父组件中，则通过 "$refs.索引ID" 访问子组件的实例：
showChildComponentData: function() {
alert(this.$refs.cc1.msg);
alert(this.$refs.cc2.msg);
}
2、子组件访问父组件：使用$parent
在子组件中，通过this.$parent可以访问到父组件的实例。
3、子组件访问根组件实例：使用$root
注意：尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。
另外，在子组件中修改父组件的状态是非常糟糕的做法，因为： （1）这让父组件与子组件紧密地耦合； （2）只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。
四、自定义事件
有时候我们希望触发父组件的某个事件时，可以通知到子组件；触发子组件的某个事件时，可以通知到父组件。
Vue 实例实现了一个自定义事件接口，用于在组件树中通信。这个事件系统独立于原生 DOM 事件，用法也不同。
每个 Vue 实例都是一个事件触发器：
（1）使用 $on() 监听事件；
（2）使用 $emit() 在它上面触发事件；
（3）使用 $dispatch() 派发事件，事件沿着父链冒泡；
（4）使用 $broadcast() 广播事件，事件向下传导给所有的后代。
1、派发事件
下面这段代码是一个简单的事件派发处理
<div id="app">
<p>Messages: {{ messages | json }}</p>
<child-component></child-component>
</div>
<template id="child-component">
<input v-model="msg" />
<button v-on:click="notify">Dispatch Event</button>
</template>
<script src="vue.js"></script>
<script>
// 注册子组件
Vue.component('child-component', {
template: '#child-component',
data: function() {
return {
msg: ''
}
},
methods: {
notify: function() {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg);
this.msg = ''
}
}
}
})
// 初始化父组件
new Vue({
el: '#app',
data: {
messages: []
},
events: {
'child-msg': function(msg) {
this.messages.push(msg)
}
}
})
</script>
我们将这个示例分为几个步骤解读：
子组件的button元素绑定了click事件，该事件指向notify方法
子组件的notify方法在处理时，调用了$dispatch，将事件派发到父组件的child-msg事件，并给该该事件提供了一个msg参数
父组件的events选项中定义了child-msg事件，父组件接收到子组件的派发后，调用child-msg事件。
结果： 
2、广播事件
下面这段代码是一个简单的事件广播处理
<div id="app">
<input v-model="msg" />
<button v-on:click="notify">Broadcast Event</button>
<child-component></child-component>
</div>
<template id="child-component">
<ul>
<li v-for="item in messages">
父组件录入了信息：{{ item }}
</li>
</ul>
</template>
<script src="vue.js"></script>
<script>
// 注册子组件
Vue.component('child-component', {
template: '#child-component',
data: function() {
return {
messages: []
}
},
events: {
'parent-msg': function(msg) {
this.messages.push(msg)
}
}
})
// 初始化父组件
new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
notify: function() {
if (this.msg.trim()) {
this.$broadcast('parent-msg', this.msg);
this.msg = '';
}
}
}
})
</script>
我们将这个示例分为几个步骤解读：
父组件的button元素绑定了click事件，该事件指向notify方法
父组件的notify方法在处理时，调用了$broadcast，将事件派发到子组件的parent-msg事件，并给该该事件提供了一个msg参数
子组件的events选项中定义了parent-msg事件，子组件接收到父组件的广播后，调用parent-msg事件
结果：
3、$on监听事件，$emit触发事件
现在$dispatch、$broadcast需要配合events使用，在vue2.0上已经被删除了，现在更多的是使用$on监听事件、$emit触发事件。主要分为以下四步：
（1）子组件绑定send事件
<template id="bbb">
<h3>子组件-</h3>
<input type="button" value="send" @click="send">
</template>
（2）子组件通过$emit主动触发事件，发送数据到父组件
methods:{
send(){//2、子组件通过$.emit主动发送数据a到父级
this.$emit('child-msg',this.a);
}
}
（3）父组件通过v-on监听子组件触发的事件
<template id="aaa">
<span>我是父级 -> {{msg}}</span>
//3、父组件绑定接收事件，接收的一边是子组件里的事件名，一边是父组件里面需要定义的事件名
<bbb @child-msg="get"></bbb>
</template>
（4）父组件接受子组件发送的数据
methods:{
//4、父组件接收子组件发送的数据，作为参数，改变自己里面数据
get(msg){
this.msg=msg;
}
}