vue3 隔代传值 事件

VUE3隔代传值MITT

1.安装mitt

npm install --save mitt

2.utils文件夹下，新建一个bus.ts

eventbus.ts

/ mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象
// 这里我们在js中暴露这个事件总线对象
import mitt from "mitt";
const emitter = mitt()
export default emitter

3. 使用，使用mitt进行兄弟组件之间的通信实现 或者子孙隔代组件 都可以

父组件

// 这里我们导入我们单独写的暴露事件总线对象的js
// 模板代码
<button @click="sendHomeContent">send</button>  

// 导入事件总线
import emitter from "./utils/eventbus.js";  
// methods代码
sendHomeContent(){
    // 触发自定义总线why，并传入一个对象
     emitter.emit("why",{name:'why',age:19})
}

然后孙组件或者兄弟组件接收

// 导入事件总线
import emitter from "./utils/eventbus.js";

// 在创建vue实例时，注册why事件总线
created(){
    emitter.on("why",msg=>{
        console.log("HomeContent接收到得About发送得数据了：",msg);
    });
}

如果没有按钮 建议放在onMounted

onMounted(async() => {
  emitter.emit('getKey', { key: portId })
})

同样接收

const key = ref('')
emitter.on('getKey', (val:any) => {
  key.value = val.key.value
})

最后用完清空是个好习惯

emitter.all.clear()