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和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存放共享的变量

vue组件间通信方法集相关推荐

Vue 组件间通信方法汇总
Vue 组件间通信方法汇总 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌订阅除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间 ...
Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）
前言除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间是如何通信的.
vue组件间通信六种方式
vue组件间通信六种方式组件之间的传值通信组件之间的通讯分为三种:父传子.子传父.兄弟之间的通讯: props/$emit 父传子:主要是通过props来实现的具体实现:父组件通过import引 ...
Vue.js解析(十)【Vue组件间通信】
什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
Vue 组件间通信有哪几种方式
Vue 组件间通信主要指以下 3 类通信:父子组件通信.隔代组件通信.兄弟组件通信 1.props / $emit 适用父子组件通信 props是父组件将值传给子组件,$emit是子组件通过派发事件 ...
vue组件间通信六种方式（完整版）
前言组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...
每日一道面试题：Vue 组件间通信有哪几种方式？
Vue 组件间通信有哪几种方式? 父子组件通信.隔代组件通信.兄弟组件通信 (1)props / $emit适用父子组件通信 - 这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不 ...
Vue 组件间通信几种方式（完整版）
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是 ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...