Vue3+TypeScript学习笔记（二十）

Mitt是一个事件订阅/发布库，相当于Vue3中的全局事件总线。这个库需要通过npm install mitt安装
使用方法：

1. 在main.ts中引入并调用，配置好扩展声明

main.ts

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

const Mit = mitt()

// 拓展d.ts获取代码提示，配置错误会出现“不存在该属性”的情况
declare module 'vue' {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}

export const app = createApp(App)

// 将Mit挂载到全局对象中
app.config.globalProperties.$Bus = Mit

app.mount('#app')

        

          
        
        
        

          

          AI 代码解读
        
      
      

1. 在组件A中使用（注意不能直接引入app，app身上并没有Mit）

A.vue

<template></template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
// 获取当前组件实例
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()

// 获取实例身上的$Bus对象,定义事件执行回调，第一个参数是事件名，第二个是执行的方法函数
instance?.proxy?.$Bus.on('on-click', params => {
    console.log('收到了', params)
})
</script>

<style scoped></style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

1. 在组件B中使用，方法同A相似

<template>
    <input v-model="message" type="text">
    <button @click="emit">点我向A组件传递数据</button>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
// 获取当前组件实例
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance()

let message = ref<string>()
const emit = () => {
  // 获取实例身上的$Bus对象,定义触发事件回调，第一个是事件名，第二个是要传给执行方法的参数
    instance?.proxy?.$Bus.emit('on-click',message.value)
}
</script>

<style scoped>

</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

1. 在App.vue中引入这两个组件以挂载至页面

B.vue

<template>
    <A></A>
    <B></B>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import A from './components/A.vue';
import B from './components/B.vue';

</script>

<style scoped>

</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

App.vue

1. 完成效果：