上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。”

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

　　注意：组件模板都定义在<template>标签中，然而IE不支持<template>标签，这使得在IE中<template>标签中的内容会显示出来。

　　解决办法——隐藏<template>标签

template{    display: none;}

一、编译作用域

　　尽管使用组件就像使用一般的HTML元素一样，但它毕竟不是标准的HTML元素，为了让浏览器能够识别它，组件会被解析为标准的HTML片段，然后将组件的标签替换为该HTML片段。

　　这段代码定义了一个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组件呢？

　　答案是Vue实例。

　　至此，我们应该认识到组件的作用域是独立的：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译

　　通俗地讲，在子组件中定义的数据，只能用在子组件的模板。在父组件中定义的数据，只能用在父组件的模板。如果父组件的数据要在子组件中使用，则需要子组件定义props。

二、使用Slot

　　为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个处理称为内容分发，Vue.js 实现了一个内容分发 API，使用特殊的 <slot> 元素作为原始内容的插槽。如果不理解这段话，可以先跳过，你只要知道<slot>元素是一个内容插槽。

1、单个Slot

　　下面的代码在定义my-component组件的模板时，指定了一个<slot></slot>元素。

     
    
              
       
Hello Vue.js!
    
          
          
      
     
     

　　第一个<my-component>标签有一段分发内容<h1>Hello Vue.js!</h1>，渲染组件时显示了这段内容。

　　第二个<my-component>标签则没有，渲染组件时则显示了slot标签中的内容。

　　简而言之，slot就是一个占位符，当template里面有内容时就把位置给它显示；当没有内容时，就默认显示slot里的内容。

2、指定名称的slot

　　上面示例是一个匿名slot，它只能表示一个插槽。如果需要多个内容插槽，则可以为slot元素指定name属性。

　　多个slot一起使用时，会非常有用。例如，对话框是HTML常用的一种交互方式。在不同的运用场景下，对话框的头部、主体内容、底部可能是不一样的。

//使用时，用name
     //定义时
     
    
      
提示信息
     

三、父子组件之间的访问

　　有时候我们需要父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。针对这几种情况，Vue.js都提供了相应的API：

　　1、父组件访问子组件：使用$children或$refs

　　在父组件中，通过this.$children可以访问子组件。this.$children是一个数组，它包含所有子组件的实例。

　　组件个数较多时，我们难以记住各个组件的顺序和位置，通过序号访问子组件不是很方便。在子组件上使用v-ref指令，可以给子组件指定一个索引ID：

　　在父组件中，则通过 "$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、派发事件

　　下面这段代码是一个简单的事件派发处理

     
    
      
Messages: {
    { messages | json }}
    
      
     
     

　　我们将这个示例分为几个步骤解读：

　　　　子组件的button元素绑定了click事件，该事件指向notify方法

　　　　子组件的notify方法在处理时，调用了$dispatch，将事件派发到父组件的child-msg事件，并给该该事件提供了一个msg参数

　　　　父组件的events选项中定义了child-msg事件，父组件接收到子组件的派发后，调用child-msg事件。

　　结果：

2、广播事件

　　下面这段代码是一个简单的事件广播处理

     
    
          
      Broadcast Event    
      
     
     

　　我们将这个示例分为几个步骤解读：

　　　　父组件的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事件

　　（2）子组件通过$emit主动触发事件，发送数据到父组件

methods:{    send(){
     //2、子组件通过$.emit主动发送数据a到父级        this.$emit('child-msg',this.a);    }}

　　（3）父组件通过v-on监听子组件触发的事件

　　（4）父组件接受子组件发送的数据

methods:{    //4、父组件接收子组件发送的数据，作为参数，改变自己里面数据    get(msg){        this.msg=msg;    }}