携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第十一天，点击查看活动详情

参考文章：

blog.csdn.net/qq_41370833…

1 父子组件通信常用props和emit还有(ref:父操作子)；

2、兄弟组件通信常用定义的公共事件bus的$on、$emit；

3、祖先和子孙组件通信常用$attrs和$listener、provide和inject；

4、复杂通信常用vuex

父子组件通信的5种方法

props属性绑定（父组件向子组件传递数据）

$emit实现子组件向父组件传递数据

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父 组件通过@event监听并接收参数。（没看明白？不重要 直接看下面代码）

子传父的巧用

参考视频：金渡教育第五期组件传参+复用的1小时45分钟

v-model（父传参给子）

父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，
在子组件中通过this.$emit(‘input',val)自动修改v-model绑定的值

使用$ref(父组件访问子组件的属性和方法)

使用$parent（子组件访问父组件的数据和方法)

使用.sync修饰符监听父中属性变化并修改（子操作父）

父组件给子组件传入一个对象：

非父子组件间的数据传递，兄弟组件传值

attrs和listeners

listeners

第一种方式处理父子组件之间的数据传输有一个问题：如果多层嵌套，父组件A下面有子组件B，
组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢?

如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C;要是组件A和组件C之间有更多的组件，那采用这种方式就很复杂了。从Vue 2.4开始，提供了![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20a2b9cccaf7419e92995b560032911a~tplv-k3u1fbpfcp-zoom-1.image)listeners来解决这个问题，能够让组件A之间传递消息给组件C。

provide和inject

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

中央事件总线