Vue2.0笔记——组件3

非父子组件之间的通信

非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线。

这句话呢是官网原话，我们看官网的说明和例子。其通信的方法还是，触发与监听事件的方式，与子向父组件传递数据为相同的元素。也就是$emit方法和$on方法。接下来我们具体看看这个例子。
示例:

//空的Vue实例var emptyVm = new Vue();var vm = new Vue({    el:'#app',    components:{        'xiao-x':xiao_x,        'xiao-y':xiao_y,        'xiao-z':xiao_z    }});var xiao_x={    template:'<div><p>组件x:{{name}}</p><button @click="send">传递数据</button></div>',    data:function(){        return {            name:'xiao',            username:'yao'        }    },    methods:{        send(){            emptyVm.$emit('xiao-x',this.name);        }    }}var xiao_y={    template:'<div><p>组件y:{{age}}</p><button @click="send">传递数据</button></div>',    data:function(){        return {            age:18        }    },    methods:{        send(){            emptyVm.$emit('xiao-y',this.age);        }    }}var xiao_z={    template:'<p>组件z:{{name}},{{age}}</p>',    data:function(){        return {            name:'',            age:''        }    }}<div id="app">    <xiao-x></xiao-x>    <xiao-y></xiao-y>    <xiao-z></xiao-z></div>

运行实例，我们已经把该准备的已经准备好了。
x和y的模板呢，因为不想写那么高的篇幅代码，就是稍微挤一块了，接下来就是点击按钮触发，然后z里监听就好了。

但是需要注意：必须先监听，再触发，才能够监听到，不然当然是接收不到的。所以监听一定是在触发执行前的。

代码:

//x组件的事件方法methods:{    send(){        emptyVm.$emit('xiao-x',this.name);    }}//y的事件方法methods:{    send(){        emptyVm.$emit('xiao-y',this.age);    }}//z，在挂载组件模板实例之后就进行监听，所以需要用的生命周期钩子函数mounted(){//模板挂载之后执行    emptyVm.$on('xiao-x', function(name){        vm.$children[2].name=name;    });    emptyVm.$on('xiao-y',age =>{        this.age=age;    });}

好了，如此如此这般这般，就好了。运行案例，单击按钮，可以显示出来。

接下来，解释一下这些代码:

• 首先呢，三个组件拉出来单独写，没问题吧，声明一个变量，对象赋给它就行

• 然后就是模板问题，我单独挤一块了，代码多的话还是单独写吧

• 按钮单击事件触发这个这个这两个事件，给它参数，另一边写上事件名，加上回调函数。

• 然后，你要想监听必须是在触发前吧，什么时候最早，挂载之后呗，所以整个$on监听，回调函数里跟上实参，就好了。

说明两个问题:

1.就是为什么要空的Vue实例:

主要就是创建一个空的实例作为中转站继而能通过$emit和$on这两个函数来实现，为什么呢，因为，这两个方法是，触发当前实例/监听当前实例的事件，所以你需要一个共同的实例啊，所以搞一个空的实例咯。

2.$on事件方法回调问题:
就例如第一个监听name的，如果你直接this.name=name,你觉得会不会错。之所以这么写肯定是有问题的，但是它不会报错。只不过赋值赋错了，打印一下这个this，通过data属性在某个实例中的方法发现这个this是emptyVm的实例，因为回调函数里的this是新的this，指向emptyVm。所以你需要得到z的组件实例才能复制，所以通过$children得到子实例才能赋值，当然这个$children可能是有问题的，因为官方说它是不保证顺序的，我也不太清楚。
所以你需要使用的是第二种，箭头的方式，它不会在函数中创建一个新的this。
箭头函数的格式是：实参列表 =>{//操作内容}

slot内容分发

原意是，槽，插槽的意思。
有什么用呢，我们先看一下下面的例子。
示例:

<div id="app">    <my-xiao></my-xiao></div><template id="xiao">    <div>        {{arr.join(' ')}}<br/>    </div></template>components:{    'my-xiao':{        template:'#xiao',        data:function(){            return {                name:'xiao',                arr:['what','are','you','doing']            }        }    }}

这个例子看起来也没怎么样，但是呢，你会发现<my-xiao>这个标签内空空如也，是不是想加点文字，可是无论怎么加，都会被模板替换掉的。
1.
这时，就是使用插槽的时候了，它使用<slot></slot>标签来显示，只需将它放在模板中任意为值即可，要注意的是，slot也是一个组件哦,内置的。

<div id="app">    <my-xiao>空空如也 —— 任然</my-xiao></div><template id="xiao">    <div>        {{arr.join(' ')}}<br/>        <slot></slot><!-- 代替标签内的文字 -->    </div></template>//或者，当内有内容时显示默认的值<template id="xiao">    <div>        {{arr.join(' ')}}<br/>        <slot>只有在没有要分发的内容时才会显示。</slot>    </div></template>

2.你更可以在<my-xiao>标签中添加任意代码，如常用的ul，li.同样会显示。

<my-xiao>        <ul>            <li>111</li>            <li>222</li>            <li>333</li>            <li>444</li>        </ul></my-xiao>

3.你可以通过<slot></slot>指定某个元素在模板的哪里显示

<my-xiao>    <ul slot="one">        <li>111</li>        <li>222</li>        <li>333</li>        <li>444</li>    </ul>    <p slot="QianSiXian">你褴褛我彩绘 并肩行过山与水</p></my-xiao><template id="xiao">    <div>        <slot name="QianSiXian"></slot>        {{arr.join(' ')}}<br/>        <slot name="one"></slot>    </div></template>

你可以为元素设置slot属性，并随意设置一个值，只需要在slot标签中通过name指定名称即可。