博客

使用 mitt

// 全局引入
npm install mitt
或者
cnpm install mitt

在main文件中挂载

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

const app = createApp(App)
app.config.globalProperties.$mitt = new mitt() // mitt在vue3中挂载到全局
app.mount('#app')

组件1

借助imtt 通过emit传值

<script setup>
import { defineComponent,ref,reactive,getCurrentInstance } from 'vue'
// 兄弟组件传值
let { proxy } = getCurrentInstance()
let brother = ref(100)
function sendBrotherData() {
        // 通过暴露info  传递 brother 的值
		proxy.$mitt.emit('info', brother.value)
}
</script>

组件2

<script setup>
import { defineComponent,ref,reactive,getCurrentInstance } from 'vue'

let { proxy } = getCurrentInstance()
    // 拿到info，获取info内部的值
	proxy.$mitt.on('info', (res) => {
		console.log(res)
        // 打印 100
	})
</script>

关于父子组件传值的内容请看另一篇：

vue3语法糖+ts组件传值