vue3笔记九(Provide / Inject、mitt事件总线)

1、Provide / Inject

子孙组件获取父组件数据、方法

// 1.父组件
<template>
  <div>
    <h1>根组件</h1>
    <A/>
  </div>
</template>

<script setup lang="ts">
import A from './components/A.vue'
import { provide, ref } from 'vue'

let num = ref(100)
// 若传递的是普通值，不具备响应式，需通过ref reactive添加响应式
provide('numStr',num)
</script>

// 2.子组件A
<template>
  <div class="wrap1">
    A组件--{{ num }}
    <B></B>
  </div>
</template>

<script setup lang="ts">
import B from './B.vue'
import { inject, Ref } from 'vue'

let num = inject('numStr')
</script>

<style scoped>
.wrap1 {
  width: 200px;
  height: 200px;
  background-color: #f9f9f9;
}
</style>

// 3.孙组件B
<template>
  <div class="wrap2">
    B组件---{{ num }}
    <button @click="add">add</button>
  </div>
</template>

<script setup lang="ts">
import { inject, Ref, ref } from 'vue'

let num = inject<Ref<number>>('numStr', ref(100))

const add = () => {
  num.value++
  console.log(num, '--------------')
}
</script>

<style scoped>
.wrap2 {
  width: 150px;
  height: 150px;
  background-color: #f5cbcb;
  position: relative;
  z-index: 999;
}
</style>

2、mitt事件总线

// 1、安装----------------------------------------------------------------------
npm i mitt -S

// 2、main.ts初始化挂载全局属性-------------------------------------------------
import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
 
const Mit = mitt()
const app = createApp(App)
 
// ts注册，必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}
 
// Vue3挂载全局API
app.config.globalProperties.$Bus = Mit
 
app.mount('#app')

// 3. A、B兄弟组件通信---------------------------------------------------------------
// 3.1 A组件发射事件
<template>
  <div>
    <h1>AAAAA组件</h1>
    <button @click="emitHandle">发射1</button>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from "vue";

const instance = getCurrentInstance()

const emitHandle = () => {
  instance?.proxy?.$Bus.emit('setNum1', 500)
  instance?.proxy?.$Bus.emit('setNum2', '事件2')

}
</script>

// 3.2 B组件接收事件、移除事件
<template>
  <div>
    <h1>BBBBBBB组件</h1>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onUnmounted} from "vue";

const instance = getCurrentInstance()
const fn1 = (val:any) => {
  console.log(val, '------B接收事件-----------------')
}

instance?.proxy?.$Bus.on('setNum1', fn1)
instance?.proxy?.$Bus.on('setNum2', (val:any) => {
  console.log(val, '------B接收事件-----------------')
})

// 监听所有事件 on('*')
instance?.proxy?.$Bus.on('*', (e:any, val:any) => {
  console.log(e, val, '---全部接收事件----')
})

onUnmounted(() => {
  // 移除监听事件
  instance?.proxy?.$Bus.off('setNum1', fn1)
  instance?.proxy?.$Bus.off('setNum2', fn2)

  // 清空所有监听
  // instance?.proxy?.$Bus.all.clear()
})
</script>

原文链接：
https://xiaoman.blog.csdn.net/article/details/123143981
https://blog.csdn.net/qq1195566313/article/details/125453908