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

写在前面

本篇文章将介绍如下七种组件通信方式：

• props
• emit
• v-model
• refs
• provide/inject
• eventBus
• vuex/pinia(状态管理工具)

开始搞事情~

举一个栗子

俗话说的好，学习不写demo，那就是耍流氓~

本篇文章将围绕下面这个demo，如下图所示：

demo.gif

上图中，_列表_和_输入框_分别是父子组件，根据不同传值方式，可能谁是父组件谁是子组件会有所调整。

Props方式

Props方式是Vue中最常见的一种父传子的一种方式，使用也比较简单。

根据上面的demo，我们将数据以及对数据的操作定义在父组件，子组件仅做列表的一个渲染；

父组件代码如下：

复制代码

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

复制代码

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[2]或tiny-emitter[3]；

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

状态管理工具

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

写在最后

最后，感谢您的阅读。

标题名称：总结了Vue3的七种组件通信方式，别再说不会组件通信了
地址分享：http://www.shufengxianlan.com/qtweb/news8/341308.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联