今天我们来总结下vue3中组件之间的通信方式。
组件之间的通信 分为父传子、子传父、兄弟组件之间的通信、父组件和后代之间通信、全局组件之间的通信等。基于这些通讯需求就有props、emit、defineExpose、依赖注入（provide/inject）、v-model(双向传值）、状态管理库pinia 以及作用域插槽等方式。
父子组件通信方式
- props:用 props 传数据给子组件
父组件
子组件
或者
2.defineExpose
通过将子组件中定义的方法通过defineExpose暴露出去，通过在父组件中引用，通过传入的参数，将父组件的值传给子组件；
子组件中
父组件中
3.祖父子之间的传值方式：依赖注入
依赖注入即是使用使用vue3提供的api： provide和inject 实现父子及祖孙组件之间的传值
provide：可以让我们指定想要提供给后代组件的数据。
inject：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用。
在父组件 中使用provide(属性名, 属性值)的形式提供数据
在后代组件 中使用inject（属性名）去拿到传递的值在后代组件中使用；
子父组件通信方式
- emit:子组件 emit发布一个事件，父组件订阅该事件;
在在子组件中通过defineEmits方法定义一个用于触发的事件名称，在子组件中需要的传值的地方调用该emit,示例代码如下:
在子组件中逻辑需要的地方去调用emit,并传入想要传递给父组件的值
注：defineEmits可以传一个数组；
在父组件中调用该组件的地方使用
- defineExpose:在子组件中通过defineExpose暴露出来值，父组件利用ref读取着整个子组件对象来获取值。
同上面的父子传值的defineExpose使用方法是一样的，只不过上面是通过暴露出方法，并在父组件中传参来传值，这里是用过子组件暴露值，直接通过ref读取整个子组件来传值到父组件。
双向通信
经常封装组件我们就会知道，使用v-model可以实现数据的双向传递。这里的v-model是在子组件上使用，监听的是modelValue的值，配合emit使用，实例如下：
在子组件中，value的改变，更新到父组件中的值 
父组件中，v-model上的值更新传递到子组件中 
状态管理库pinia
Vuex和Pinia都可以在Vue3中用来进行状态管理，使用这两个工具可以轻松实现组件通信，在Vue3中更推荐使用pinia。
因为pinia与vuex相比，pinia本来就是vuex的更新版本，而且它能更友好的支持TS，不再有modules，可以管理多个store,不再有modlue和mutations,而且体积更小，使用更简单。
如何使用pinia,首先也是安装，安装完在src目录下创建store文件夹，并创建index.ts的入口文件
javascript
import { createPinia } from "pinia";
const store = createPinia();
export default store;- 在main.js使用pinia插件
js
import pinia from "./store";
const app = createApp(App);
app.use(pinia).use(router);- 在store文件夹下面创建不同的store
javascript
import { defineStore } from "pinia";
// defineStore创建store，可以创建多个store
// 第一个参数是用于命名store的,这个参数相当于store的id,必须是全局唯一的值，作为唯一标识
// 第二个参数是store的具体内容
// 返回值是一个函数，将函数暴露出去
export const useCounter= defineStore("counter", { state: () => ({ count: 1, })});- 在使用该store中定义值的地方引入暴露的函数，调用该函数
xml
<template>
<!-- 直接访问store中的变量 -->
{{ counterStore.count }}
</template>
<script setup>
//引入暴露的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();
</script>
<style scoped></style>这样即可实现参数和方法在整个项目中的通信，而不受父子组件等层级关系的影响。
- vue中提供的作用域插槽也可以实现组件之间的传值，这个方法我们放到下次插槽的使用总结中。