vue组件通信的方式有以下这么几种：

• props
• $emit
• eventbus( $emit/$on)
• vuex

以上几种方式是我们熟悉的也是经常会再项目中用到的，接下来的集中也可以实现组件通信

• ref 获取子组件示例 子组件中需要添加 ref="值" 父组件获取：this.$fers.值
• $attrs 跨级传递属性
• $listeners 跨级传递方法
• $children 获取子组件实例
• $parent 获取父组件实例
• $root 获取跟组件实例(注意是跟组件，不是父组件)

详解：

关于$attrs 的使用和

$listeners的使用再前几篇文章中已经有说明

ref:

父组件

子组件

$parent 和$children 也是比较简单的，但官网也明确表示要节制的使用$parent,$children

组件通信总结：

• 父组件向子组件传值：

props  $parent  vuex 

• 子组件向父组件传值

$emit$children ref

• 非父子传值

eventbus( $emit/$on) vuex

• 跨层级

$attrs$listener $root vuex

特别注意：

1.$children已经被移除了

在v3中，$children已经被移除了

如果我们想获取子组件，官网推荐我们使用ref

2.在v3中 ** $listeners** 已经被移除了

在v3中，$listeners已经被移除了，如果我们想要监听祖辈的方法，，直接使用$attrs,事件监听属于 $attrs的一部分了 v3-migration.vuejs.org/breaking-ch…

v3-migration.vuejs.org/breaking-ch…

3.vue3中，$on已经被移除了

vue2中，可以实例化一个额外的Vue实例，在这个额外的实例上，搭配this.$on、this.$emit自定义监听事件，用于非父子组件之间的监听事件。

v3-migration.vuejs.org/breaking-ch…