在当前组件下新建一个文件Bus.js:
//emit作为发布(传递),on作为订阅(接收)
class Bus {
constructor() {
// 初始化list
this.list = {}
}
// 发布事件,..
emit(name, ...args) {
// 获取到list里的数据
let evnentName = this.list[name]
evnentName.forEach(fn => {
fn.apply(this, args)
})
}
// 接收事件
on(name, callback) {
// 如果是第一次注册,则为空;如果被多次注册,则采用之前注册的名字
let fn = this.list[name] || []
fn.push(callback)
this.list[name] = fn
}
}
// 导出bus
export default new Bus()
第一个组件中使用:
<template>
<div class="sider_header">
<div v-for="(item, index) in navList" :key="index" @click="changeNav(index, item.id)">
{{ item.label }}
</div>
</div>
</template>
<script setup>
import Bus from "./Bus";
const changeNav = (index, id) => {
// 通过Bus发布出去一个'changeNav'事件,并携带参数
Bus.emit("changeNav", id);
};
</script>
另一个组件中使用:
<script setup>
import Bus from "./Bus";
// 接收siderHeader组件传过来的值
Bus.on("changeNav", (id) => {
//这里根据自己业务写代码
});
</script>