总结了Vue3的七种组件通信方式，别再说不会组件通信了

写在前面

本篇文章是全部采用的

子组件只需要对父组件传递的值进行渲染即可，代码如下：

emit方式

emit 方式也是Vue中最常见的组件通信方式，该方式用于 子传父 ；

根据上面的demo，我们将列表定义在父组件，子组件只需要传递添加的值即可。

子组件代码如下：

在子组件中点击【添加】按钮后， emit 一个自定义事件，并将添加的值作为参数传递。

父组件代码如下：

在父组件中只需要监听子组件自定义的事件，然后执行对应的添加操作。

v-model方式

v-model 是Vue中一个比较出色的语法糖，就比如下面这段代码

就是下面这段代码的简写形势

v-model 确实简便了不少，现在我们就来看一下上面那个demo，如何用v-model实现。

子组件

在子组件中我们首先定义 props 和 emits ，然后添加完成之后 emit 指定事件。

注： update:* 是Vue中的固定写法， * 表示 props 中的某个属性名。

父组件中使用就比较简单，代码如下：

refs方式

在使用选项式API时，我们可以通过 this.$refs.name的方式获取指定元素或者组件，但是组合式API中就无法使用哪种方式获取。如果我们想要通过 ref
的方式获取组件或者元素，需要定义一个同名的Ref对象，在组件挂载后就可以访问了。

示例代码如下：

子组件代码如下：

setup 组件默认是关闭的，也即通过模板 ref 获取到的组件的公开实例， 不会暴露任何在 **

子组件

值得注意的是 **使用provide 进行数据传递时，尽量 readonly 进行数据的包装，避免子组件修改父级传递过去的数据 ** 。

事件总线

Vue3中移除了事件总线，但是可以借助于第三方工具来完成，Vue官方推荐 mitt 或 tiny-emitter ；

在大多数情况下不推荐使用全局事件总线的方式来实现组件通信，虽然比较简单粗暴，但是长久来说维护事件总线是一个大难题，所以这里就不展开讲解了，具体可以阅读具体工具的文档

状态管理工具

Vuex 和 Pinia 是Vue3中的状态管理工具，使用这两个工具可以轻松实现组件通信，由于这两个工具功能比较强大，这里就不做展示了，具体可以查阅文档