vue3中组件之间通信的方式

      今天我们来总结下vue3中组件之间的通信方式。       组件之间的通信分为父传子、子传父、兄弟组件之间的通信、父组件和后代之间通信、全局组件之间的通信等。基于这些通讯需求就有props、emit、defineExpose、依赖注入（provide/inject）、v-model(双向传值）、状态管理库pinia以及作用域插槽等方式。

• 父子组件通信方式

1. props:用 props 传数据给子组件

父组件 子组件 或者

2.defineExpose 通过将子组件中定义的方法通过defineExpose暴露出去，通过在父组件中引用，通过传入的参数，将父组件的值传给子组件； 子组件中

父组件中

3.祖父子之间的传值方式：依赖注入 依赖注入即是使用使用vue3提供的api： provide和inject实现父子及祖孙组件之间的传值 provide：可以让我们指定想要提供给后代组件的数据。 inject：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用。 在父组件中使用provide(属性名, 属性值)的形式提供数据 在后代组件中使用inject（属性名）去拿到传递的值在后代组件中使用；

• 子父组件通信方式

1. emit:子组件 emit发布一个事件，父组件订阅该事件; 在在子组件中通过defineEmits方法定义一个用于触发的事件名称，在子组件中需要的传值的地方调用该emit,示例代码如下: 在子组件中逻辑需要的地方去调用emit,并传入想要传递给父组件的值 注：defineEmits可以传一个数组； 在父组件中调用该组件的地方使用
2. defineExpose:在子组件中通过defineExpose暴露出来值，父组件利用ref读取着整个子组件对象来获取值。同上面的父子传值的defineExpose使用方法是一样的，只不过上面是通过暴露出方法，并在父组件中传参来传值，这里是用过子组件暴露值，直接通过ref读取整个子组件来传值到父组件。

• 双向通信

经常封装组件我们就会知道，使用v-model可以实现数据的双向传递。这里的v-model是在子组件上使用，监听的是modelValue的值，配合emit使用，实例如下： 在子组件中，value的改变，更新到父组件中的值 父组件中，v-model上的值更新传递到子组件中

• 状态管理库pinia

import { createPinia } from "pinia";

const store = createPinia();

export default store;

• 在main.js使用pinia插件

import pinia from "./store";

const app = createApp(App);
app.use(pinia).use(router);

• 在store文件夹下面创建不同的store

import { defineStore } from "pinia"; 
// defineStore创建store，可以创建多个store 
// 第一个参数是用于命名store的,这个参数相当于store的id,必须是全局唯一的值，作为唯一标识
// 第二个参数是store的具体内容 
// 返回值是一个函数，将函数暴露出去
export const useCounter= defineStore("counter", { state: () => ({ count: 1, })});

• 在使用该store中定义值的地方引入暴露的函数，调用该函数

<template> 
<!-- 直接访问store中的变量 -->
{{ counterStore.count }}
</template>
<script setup> 
//引入暴露的store函数
import useCounter from "./store/counter.js"; 
const counterStore = useCounter(); 
</script> 
<style scoped></style>

这样即可实现参数和方法在整个项目中的通信，而不受父子组件等层级关系的影响。

• vue中提供的作用域插槽也可以实现组件之间的传值，这个方法我们放到下次插槽的使用总结中。