干货分享：Vue3组件通信的7种方式！

组件（Component）是 Vue 最核心的功能，是可复用的vue实例；但组件实例的作用域是相互独立的，也就是说不同组件间的数据是无法直接互相引用的。那么，如何将组件间的数据关联起来？如何进行通信传递数据呢？下面本篇文章就给大家分享七种组件通信方式，希望对大家有所帮助！

本篇文章是全部采用的<script setup>这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档对两种方式的描述。

注：php中文网线上班也开始教授最新版本的vue课程了，感兴趣的朋友可以了解学习。

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

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

开始搞事情~

举一个栗子

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

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

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

1、Props方式

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