七个Vue3中的组件通信方式

写在前面

我们会讲以下七种组件通信方式：

成都网站建设哪家好，找创新互联建站！专注于网页设计、网站建设公司、微信开发、微信小程序、集团企业网站设计等服务项目。核心团队均拥有互联网行业多年经验，服务众多知名企业客户；涵盖的客户类型包括：食品包装袋等众多领域，积累了大量丰富的经验，同时也获得了客户的一致赞誉！

• props
• emit
• v-model
• refs
• provide/inject
• eventBus
• vuex/pinia

举个例子

本文将使用如下演示，如下图所示：

上图中，列表和输入框分别是父组件和子组件。根据不同的通信方式，会调整父子组件。

1、Props

props 是 Vue 中最常见的父子通信方式，使用起来也比较简单。

根据上面的demo，我们在父组件中定义了数据和对数据的操作，子组件只渲染一个列表。

父组件代码如下：

子组件只需要渲染父组件传递的值。

代码如下：

2、Emit