六、Vue基础之六

---

一、兄弟组件传参和Bus

有两个组件A,B和父组件P，A想传参到B必须先传到父组件P中，再通过父组件P传给B。
上面这种方式麻烦。

Bus：发布订阅模式

二、Mitt

vue3中$on,$off和$once实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的EventBus便无法使用了，我们可以使用Mitt库，其实就是发布订阅模式的设计。

安装

npm install mitt -S

在Main.ts中引入mitt

import {
    createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'

const Mit = mitt()

const app = createApp(App)

// 让在TS中有提示
declare module 'vue' {
   
    export interface ComponentCustomProperties {
   
        $Bus: typeof Mit
    }
}

app.config.globalProperties.$Bus = Mit

app.mount('#app')

在A组件中发布事件

<template>
    <h2>A组件</h2>
    <button @click="emit">emit</button>
</template>

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

const instance = getCurrentInstance()
// 发布事件
const emit = () => {
     
    instance?.proxy?.$Bus.emit('on-click1', 'mitt1')
    instance?.proxy?.$Bus.emit('on-click2', 'mitt2')
}

</script>

<style lang='scss' scoped>

</style>

在B组件订阅发布的事件

<template>
    <h2>B组件</h2>
    {
   {
   str}}
</template>

<script setup lang='ts'>
import {
    ref, getCurrentInstance } from 'vue';
const instance = getCurrentInstance()
let str = ref('')

// 订阅事件
/*
instance?.proxy?.$Bus.on('on-click1', (strA)=>{
    console.log(strA, 'B组件')
    str.value = strA as string
})
*/

// type函数,str发布事件携带的数据
/*
instance?.proxy?.$Bus.on('*', (type, str) => {
    console.log(type, str, 'B组件')
})
*/

const Bus = (str: any) => {
   
    console.log(str, 'B组件')
}
instance?.proxy?.$Bus.on('on-click1', Bus