vue3 常用的几种组件通讯方式

vue3 常用的几种组件通讯方式，大致如下

Props/Emit
Pinia
事件总线（mitt）
Provide/Inject
浏览器本地存储

1. Props / Emit

注释：prop属性名称 / 方法名称的格式，采用 camelCase 与 kebab-case。

1.1 props

（1）上游组件设置 prop 值（通过 v-bind 或冒号）

或者

（2）下游组件接收 prop 值（通过 defineProps 方法）

import { defineProps } from 'vue'

更多详见：https://cn.vuejs.org/guide/components/props.html

1.2 Emit

（1）上游组件：接收来自下游组件的方法触发

（2）下游组件：主动触发上游组件的方法

或者

import { defineEmits } from 'vue'

2. Pinia

　　详见 vue3的状态管理库

3. 事件总线（第三方库mitt）

　　第一步：安装 mitt　　　　npm install mitt -save

　　第二步：初始化 mitt，即新建一个 mitt.js 文件，然后写入如下内容

　　　　import mitt from 'mitt'

　　　　const emitter = new mitt()

　　　　export default emitter

　　第三步：触发 mitt

import emitter from '@/utils/mitt'

function handleClick() {

　　emitter.emit('on-button-click', true);
}

　　第四步：接收 mitt
　　　　import { onMounted, onUnmounted } from 'vue';
　　　　import emitter from '@/utils/mitt'

　　　　function onFoo(e) { console.log(' 触发了！'); }

　　　　// 监听
　　　　onMounted(() => {
　　　　　　emitter.on('on-button-click', onFoo);
　　　　});

　　　　// 移除
　　　　onUnmounted(() => {
　　　　　　emitter.off('on-button-click', onFoo);
　　　　});