Vue 组件（三）非父子组件通信

在实际业务中，除了父子组件通信外，还有很多非父子组件通信的场景。非父子通信组件一般有两种，兄弟组件通信和跨级组件通信。

---

实现非父子组件通信主要有以下三种方法：

1、中央事件总线（bus）
使用一个空的 Vue 实例作为中央事件总线，轻量地实现了任何组件间的通信，包括父子、兄弟、跨级组件.

示例代码如下：

<div id="app">
        {{message}}
        <component-a></component-a>
</div>

<script>
    //创建一个空实例
    var bus = new Vue();        
    Vue.component('component-a',{
        template:`<button @click="handleEvent">传递事件</button>`,
        methods:{
            handleEvent: function(){
            bus.$emit('on-message','来自组件component-a的内容');
                }
            }
            });         
    new Vue({
            el:'#app',
            data:{
                  message:''
                },
            mounted:function(){
                var $_this = this;
                //在实例初始化时，监听来自bus实例的事件
                bus.$on('on-message',function(msg){
                    $_this.message = msg;
                });                 
                }
            })
</script>

运行结果：

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

示例代码如下：

<div id="app">
    {{message}}
    <component-a></component-a>
</div>

<script>
   Vue.component('component-a',{
        template:`\
          <button @click="handleEvent">通过父链直接修改数据</button>`,
        methods:{
                handleEvent: function(){
                //访问到父链后可以做任何操作，比如直接修改数据
                this.$parent.message ='来自组件component-a 的内容';
                    }
                }
            });

    new Vue({
            el:'#app',
            data:{
                message:''
                }
            })
</script>

运行结果：

3、子组件索引

用特殊的属性 ref 来为子组件指定一个索引名称。

示例代码如下：

<div id="app">
    <button @click="handleRef">通过ref获取子组件实例</button>
    <component-a ref="comA"></component-a>
</div>

<script>
    Vue.component('component-a',{
            template:`<div>子组件</div>`,
            data:function(){
                return{
                    message:'子组件内容'
                    }
                }
            })          
    new Vue({
            el:'#app',
            methods:{
                handleRef:function(){
                    //通过$refs来访问指定的实例
                    var msg = this.$refs.comA.message;
                        console.log(msg);
                    }
                }
            })
</script>

运行结果：