vue3学习笔记（12）全局总线 mitt

Vue3专栏入口

首先全局总线在vue2中的写法vue3也用不了。说白了vue3把自带的全局总线删掉了。那么我们如何实现全局总线的效果呢？插件mitt可以实现。

一、mitt下载

npm install mitt -s

二、mitt使用

模拟需求：
在组件About中我需要传输一个value经过处理后在传送回来展示到模板中。

我习惯创建一个mitt文件夹，里面放一个任意名字的js文件，我这里叫event.js。

import mitt from 'mitt'
const emitter = mitt();
export default emitter

然后在需要的位置直接导入如App.vue中。

<template>
	<div>
		<AboutVue></AboutVue>
	</div>
</template>

<script lang="ts">

import { defineComponent, inject, onBeforeMount, provide, ref } from 'vue'
import AboutVue from './components/About.vue'

import emitter from './mitt/event'
export default defineComponent({
	name: 'App',
	components: { AboutVue },
	setup(props, context) {

		// 在挂载前执行
		onBeforeMount(() => {
			// 定义emitter
			emitter.on("name", (value) => {
				// 模拟数据处理费时3秒
				setTimeout(() => {
					value = 456
					console.log(value);
					// 发送信息
					emitter.emit("name_back", (value))
				}, 3000)
			})
		})

		return {
		}
	}
})
</script>

<style scoped>
</style>

About.vue的全部代码如下:

<template>
    {{ name }}
</template>

<script>

import { defineComponent, inject, onBeforeMount, onBeforeUnmount, onMounted, provide, ref } from 'vue'
import emitter from '../mitt/event.js'

export default defineComponent({
    name: 'About',
    setup(props, context) {

        const name = ref("")

        // 在组件开始挂载前执行
        onBeforeMount(()=>{
            //  定义emitter
            emitter.on("name_back", (value_d) => {
                console.log("back", value_d);
                name.value = value_d
            })
        })
        
        // 在组件挂载后执行
        onMounted(()=>{
            // 发送信息
            emitter.emit('name', "1")
        })

        // 在组件卸载前删掉
        onBeforeUnmount(()=>{
            emitter.off('name_back')
        })

        return {
            name
        }
    }
})
</script>

<style scoped>
</style>