vue组件间通信方法集

整理vue中8种常规的通信方案

1、通过 props 传递
2、通过 $emit 触发自定义事件
3、使用 ref
4、EventBus
5、$parent 或$root
6、attrs 与 listeners
7、Provide 与 Inject
8、Vuex

1、通过 props 传递

/*适用场景：父组件传递数据给子组件
子组件设置props属性，定义接收父组件传递过来的参数
父组件在使用子组件标签中通过字面量来传递值*/

//子组件
props:{  
    // 字符串形式  
 	name:String // 接收的类型参数  
    // 对象形式  
    age:{    
        type:Number, // 接收的类型为数值  
        defaule:18,  // 默认值为18  
        require:true // age属性必须传递  
    }  
}

//父组件
<Children name="Tom" age=18 /

2、$emit 触发自定义事件

/*适用场景：子组件传递数据给父组件
子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
父组件绑定监听器获取到子组件传递过来的参数*/

//子组件
this.$emit('add', this.msg)  

//父组件
<Children @add="getMsg($event)" />  

3、使用ref

/*适用场景：父组件获取子组件信息
父组件在使用子组件的时候设置ref
父组件通过设置子组件ref来获取数据*/

//父组件
<Children ref="foo" />  
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据，可以调用子组件的变量和方法

4、EventBus实现兄弟组件间的通信

/*使用场景：兄弟组件传值
创建一个中央事件总线EventBus
兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
另一个兄弟组件通过$on监听自定义事件*/

// 创建一个中央时间总线类  
class Bus {  
  constructor() {  
    this.callbacks = {};   // 存放事件的名字  
  }  
  $on(name, fn) {  
    this.callbacks[name] = this.callbacks[name] || [];  
    this.callbacks[name].push(fn);  
  }  
  $emit(name, args) {  
    if (this.callbacks[name]) {  
      this.callbacks[name].forEach((cb) => cb(args));  
    }  
  }  
}  
  
// main.js  
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上  
// 另一种方式  
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

//组件A
this.$bus.$emit('foo')  
//组件B
this.$bus.$on('foo', this.handle)  

5、通过$ parent 或 $ root通信

//在一个父组件中我们希望两个子组件通信时候可以通过共同祖辈$parent或者$root搭建通信桥连

//组件A
this.$parent.on('add',this.add)
//组件B
this.$parent.emit('add')

6、$ attrs 与$ listeners

$ attrs

/*适用场景：祖先传递数据给子孙
设置批量向下传属性$attrs和 $listeners
包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
可以通过 v-bind="$attrs" 传⼊内部组件*/

//$attrs能够接收除了props声明外的所有绑定属性，但是一旦属性在props中被声明了，那么就不能通过$attrs获取

//父组件
<template>
	<child :name="张三" age="18" ></child>
</template>

//子组件
<template>
	<p>{{name}}</p>
	<grandson:name="张三" age="18"  v-bind="$attrs"></grandson>
</template>

props:['age']
created(){
	console.log($attrs)//{ name: "张三" }
}

//孙子组件
<template>
	<p>{{name}}</p>
</template>

created(){
	console.log($attrs)//{ name: "张三" }
}
/*可以看出，我们声明了两个属性，但是age在props中声明了，所以打印$attrs时候只有name属性
而在子组件上面绑定v-bind="$attrs"则可以将父组件的属性向下传递到孙子组件，这就是$attrs
的妙用，我可以在子组件上绑定多个属性，子组件需要的在props声明，孙子组件用到的则用$attrs
传递下去，这样能够清晰明了，也方便维护*/

$ listeners
跟$ attrs不一样，$ listeners是可以让孙子和儿子组件访问到父组件的属性和方法

//$ listeners：接收除了带有.native事件修饰符的所有事件监听器
<template>
	<child @click.native="clickChild" @customEvent="childEvent" ></child>
</template>

//子组件
<template>
	<grandson:name="张三" age="18"  v-bind="$listeners"></grandson>
</template>

created(){
	console.log($listeners)//{ customEvent: fn }
}

//孙子组件
created(){
	this.$emit('customEvent')
}

总的来说，$ attrs 与$ listeners的使用场景：
1、组件传值时使用： 爷爷在父亲组件传递值，父亲组件会通过$ attrs获取到不在父亲props里面的所有属性，父亲组件通过在孙子组件上绑定$ attrs 和 $ listeners 使孙组件获取爷爷传递的值并且可以调用在爷爷那里定义的方法；
2、对一些UI库进行二次封装时使用：比如element-ui，里面的组件不能满足自己的使用场景的时候，会二次封装，但是又想保留他自己的属性和方法，那么这个时候时候$attrs和$listners是个完美的解决方案。

在学习这块的时候看到一篇图文并茂的文章，推荐给大家参考：【Vue】 组件通信之$ attrs、$ listeners

7、provide 与 inject

provide 与 inject对于我理解来说像是$ attrs 与$ listeners简单的升级版

//应用场景：适合多层级适合向后代组件传值

//祖先组件
provide(){  
    return {  
        msg:'hello world'  
    }  
}

//后代组件
inject:['msg'] // 获取到祖先组件传递过来的值   

8、vuex

这个大魔王想必就不用过多赘述了，能够优雅的使用vuex来管理项目的都是大手子，这里只做简单的介绍，想了解详细请移步我另一篇文章vue面试题集

state：用来存放共享变量的地方

getter：可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值

mutations：用来存放修改state的方法。

actions：也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

总结

每个方法都有其适用的场景和优势，学会组合使用才是我们需要掌握的艺术：

• 父子关系的组件数据传递选择 props 与 $ emit进行传递，也可选择ref
• 兄弟关系的组件数据传递可选择$ bus，其次可以选择$ parent进行传递
• 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
• 复杂关系的组件数据传递可以通过vuex存放共享的变量