Vue3中兄弟传值mitt用法

vue3中兄弟传值mitt

Vue3中兄弟传值mitt用法

这里记录一次mitt的使用方法

1.下载mitt

npm install mitt

2.创建bus.js

在src目录下创建untils文件创建bus.js，里面内容

import mitt from "mitt";
const mitts = mitt();
export default mitts;

3.兄弟组件A 内容

比如A组件要给B组件传值

import mitts from "../../utils/bus.js";
let value = ref('我是要传递的值')
mitts.emit("message", value) //发送出去

4.兄弟组件B内容

兄弟组件B接收内容
两个页面都需要引入bus.js

import mitts from "../../utils/bus.js";
let receive = ref('')
onMounted(() => {
    mitts.on("message", e => {
       receive.value = e //这个时候receive就会是 ‘发送出去’ 了
    })
})

5.总结

简单的说就是下载mitt，然后创建bus.js,然后引入，传值的组件用mitts.emit,接收值的组件用 mitts.on。

希望以上内容对你有帮助，如有错误欢迎指正。