vue2.X基础知识五之非父子组件通信

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

1、中央事件总线(bus)处理任何组件通信

  在vue2.x中推荐使用一个空的Vue实例作为中央事件总线(bus)，也就是一个中介。例如：

<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的内容');
    			}
    		}
    	});
        var app = new Vue({
            el: "#app",
            data: {
            	message: ''
            },
            mounted: function () {
            	var _this = this;
            	
            	//在实例化时，监听来自bus实例的事件
            	bus.$on('on-message', function (msg) {
            		_this.message = msg;
            	});
            }
        });
    </script>

首先创建了一个名为bus的空Vue实例，里面没有任何内容；然后全局定义了组件component-a;最后创建Vue实例app，在app初始化时，也就是在生命周期mounted钩子函数里监听了来自bus的事件on-message，而在组件component-a中，点击按钮会通过bus把事件on-message发出去，此时app就会接收来自bus的事件，进而在回调函数里完成自己的业务逻辑。

这种方式巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级；如果深入使用，可以扩展bus实例，给它添加data、methods、computed等选项。在获取公共信息时候非常有用，只需在初始化时让bus获取一次，任何时间、任何组件就可以从中直接使用了。

2、父链

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

<div id="app">
		{{ message }}
        <component-a></component-a>
    </div>
    <script>
    	/*vue尽管允许这种操作，但是不推荐使用*/
    	Vue.component('component-a', {
    		template: '<button @click="handleEvent">通过父链直接修改数据</button>',
    		methods: {
    			handleEvent: function () {
    				//访问父链后，可以做任何操作，比如直接修改数据
    				this.$parent.message = '来自组件component-a的内容';
    			}
    		}
    	});
    	
        var app = new Vue({

            //选择元素
            el: "#app",
            data: {
            	message: ''
            },
        });

尽管Vue允许子组件直接访问父组件，但在业务中，子组件应该尽可能地避免依赖父组件的数据，更不应该去主动修改它的数据。父子组件最好还是通过props和$emit来通信。

3、子组件索引

当子组件较多时，通过this.$children来一一遍历我们需要的一个组件实例是比较困难的，尤其是组件动态与渲染时，他们的序列不固定。Vue提供了子组件索引的方法，用特殊的属性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: '子组件内容'
    			}
    		}
    	});
        var app = new Vue({
            el: "#app",
            methods: {
            	handleRef: function () {
            		//通过$refs来访问指定的实例
            		var msg = this.$refs.comA.message;
            		console.log(msg);
            	}
            }
        });

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

$refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用$refs。Vue2.x中ref会自动判断是普通标签还是组件。

本文摘抄自：《vue实战》