Vue2.0组件通信的方式

父子组件通信 事件机制(父->子props,子->父 $on、 $emit)获取父子组件实例 $parent、 $childrenRef 获取实例的方式调用组件的属性或者方法Provide（祖先组件）、inject（后代组件） (不推荐使用，组件库时很常用) 兄弟组件通信 eventBus 这种方法通过一个空的 Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件 Vue.prototype.$bus = new Vue Vuex 跨级组件通信 Vuex$attrs、 $listeners（爷孙组件常用， $attr $listener）

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过v-bind=" $attrs" 传入内部组件——在创建高级别的组件时非常有用。

简单理解：$attrs的值为父作用域通过v-bind绑定的值（过滤掉被props识别的值），若该组件没有声明props，则 $attrs为父作用域通过v-bind绑定的全部值。

假设有爷、父、孙三个组件，在爷组件中引用父组件时，

//爷组件 <template> <div id='grandfather'> <father :num1='num1' :num2='num2' v-on='func1' v-on='func2'> </div> </template> <script> import Father from './Father'; export default { name:'grandfather', components:{ Father, }, data(){ return { num1:1, num2:2, } }, methods:{ func1(){ console.log('func1'); }, func2(){ console.log('func2'); } } } </script> //父组件 <template> <div id='father'> <son v-bind="$attrs" v-on="$listeners"> </div> </template> <script> export default { name:'father', props:{ num1:Number, }, mounted:{ console.log(num1); console.log(this.$attrs); this.$emit('test1'); }, } </script> 输出： 1 2 func1 //孙组件 <template> <div id='son'> </div> </template> <script> export default { name:'father', mounted:{ console.log($attrs); this.$emit('test2'); }, } </script> 输出： 2 func2 Provide、inject 依赖注入