vue3消息发布和订阅(组件传参,全局事件总线), $bus,$on,$emit,$off
在vue3中 不能像以前vue2那样写全局$bus了,但是可以用其他的方法实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const $Bus = {
list: {},
// 订阅
$on(name, fn) {
this.list[name] = this.list[name] || [];
this.list[name].push(fn);
},
// 发布
$emit(name, data) {
if (this.list[name]) {
this.list[name].forEach((fn) => { fn(data); });
}
},
// 取消订阅
$off(name) {
if (this.list[name]) {
delete this.list[name];
}
}
}
</script>
</head>
<body>
<button id="btn2">按钮2</button>
</body>
</html>
<script>
// 订阅消息
$Bus.$on("abc", function (result) {
console.log(result);
});
// 事件点击
btn2.onclick = function () {
// 消息发布
$Bus.$emit("abc", "22222222222222222222222222")
};
</script>
4880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
