Vue 非父子组件通信

前面的话

在实际业务中，除了父子通信外，还有很多非父子组件通信的场景，非父子组件一般有两种，兄弟组件和跨多级组件。Vue.js 2.x中，使用一个空的Vue实例作为中央事件总线（bus）。
中央事件总线就好比一个中介，租房者与出租者担任两个跨级组件，租房者与出租者之间的联系全靠中介，而两个跨级组件之间的通信全靠中央事件总线（bus）。

中央事件总线

<div id="app1"><component-a></component-a><component-b></component-b>
</div>
<script>var bus = new Vue();var app1 = new Vue({el: '#app1',components: {'component-a': {template:  `<p>{{message}}{{changeMsg}}</p>`,data() {return {message: ''}},computed:{changeMsg() {var that = this;// 监听来自bus实例的事件bus.$on('on-message',function(msg) {that.message = msg;})}} },'component-b': {template: `<button @click="handleEvent">传递事件</button>`,methods: {handleEvent: function() {// 点击按钮通过bus把事件on-message发出去bus.$emit('on-message','来自组件component-b的内容')}}}}});
</script>

上例中组件component-a与component-b是兄弟关系：首先创建了一个名为bus的空实例，作为中央事件总线。然后创建了 Vue实例app1，局部定义了两个兄弟组件，在component-b组件中，点击按钮会通过bus把事件on-message发出去；在 component-a中用监听属性监听来自bus实例的事件。

除了中央事件bus外，还有两种方法可以实现组件间通信：父链与子组件索引.

父链

在子组件中,使用this.$ parent可以直接访问该组件的父实例或组件，父组件也可以通过this.$children访问它的所有的子组件，而且可以递归向上或向下无线访问，直到根实例或最内层的组件。

  <div id="app2"><parent-component></parent-component></div><script>var childNode = {template: `<button @click="handleEvent">通过父链直接修改数据</button>`,methods: {handleEvent() {// 访问父链后，可以做任何操作，比如直接修改数据this.$parent.message = '来自组件child-component的内容'}}}var app2 = new Vue({el:'#app2',components: {'parent-component': {template:   `<div class="parent"><p>{{message}}</p><child-component></child-component></div>`,data() {return {message: ''}},components:  {'child-component': childNode}}}});
</script>

尽管Vue允许这样操作，但是在业务中，子组件应该尽可能避免依赖父组件的数据，更不该去修改它的数据，这样使得父子组件紧耦合，父组件可以被任意组件修改，理想情况下，只有组件自己能修改它的状态。父子组件最好还是通过props和$emit来通信。

子组件索引

当子组件较多时,通过this.children来一一遍历出我们需要的一个组件实例是比较困难的，尤其是组件动态渲染时，它们的序列是不固定的。Vue提供子组件索引的方法，用特殊的属性ref来为子组件指定一个索引名称。

    <div id="app3"><parent-component></parent-component></div><script>var app3 = new Vue({el:'#app3',components: {'parent-component': {template: `<div class="parent"><button @click="handleRef">通过ref获取子组件实例</button><child-component ref="childCom"></child-component></div>`,components: {'child-component':  {template: `<div>子组件</div>`,data(){return {message: '子组件的内容'}}}},methods: {handleRef() {// 父组件通过$ref来访问指定的实例var msg = this.$refs.childCom.message;console.log(msg);}}}}})
</script>

在父组件模板中，子组件标签上使用ref指定一个名称，并在父组件内通过this.$refs来访问指定名称的子组件。

注意：$refs只在组件渲染完成后才填充，并且时非响应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用 $ refs