整理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，里面的组件不能满足自己的使用场景的时候，会二次封装，但是又想保留他自己的属性和方法，那么这个时候时候 a t t r s 和 attrs和 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存放共享的变量
