import mitt from 'mitt'; // 这个会创建一个对象emitter // 把它当作全局事件总线对象即可 export default mitt();
import mitt from 'mitt';
// 这个会创建一个对象emitter
// 把它当作全局事件总线对象即可
export default mitt();
<template> <User></User> </template> <script> // 导入全局事件总线对象 import emitter from "./utils/event-bus.js"; import User from './components/User.vue'; // 引入组合式API生命周期钩子函数 import { onMounted } from "vue"; export default { components: { User }, name : "App", setup(){ // 导入生命周期mounted onMounted(() => { emitter.on('event1',showInfo); }); function showInfo(user){ alert(`姓名${user.name}年龄${user.age}`); } return {showInfo}; } } </script> <style> </style>
<template>
<User></User>
</template>
<script>
// 导入全局事件总线对象
import emitter from "./utils/event-bus.js";
import User from './components/User.vue';
// 引入组合式API生命周期钩子函数
import { onMounted } from "vue";
export default {
components: { User },
name : "App",
setup(){
// 导入生命周期mounted
onMounted(() => {
emitter.on('event1',showInfo);
});
function showInfo(user){
alert(`姓名${user.name}年龄${user.age}`);
}
return {showInfo};
}
}
</script>
<style>
</style>
<template> <button @click="triEvent">触发</button> <button @click="remove()">解除所有绑定</button> <button @click="removeEvent1()">解除event1绑定</button> </template> <script> import emitter from "../utils/event-bus.js"; export default { name : "User", setup(){ function triEvent(){ emitter.emit("event1",{name:"Jack",age:30}) } function remove(){ // 清除所有 emitter.all.clear(); } function removeEvent1(){ emitter.off('event1'); } return {triEvent,remove,removeEvent1}; } } </script> <style> </style>
<template>
<button @click="triEvent">触发</button>
<button @click="remove()">解除所有绑定</button>
<button @click="removeEvent1()">解除event1绑定</button>
</template>
<script>
import emitter from "../utils/event-bus.js";
export default {
name : "User",
setup(){
function triEvent(){
emitter.emit("event1",{name:"Jack",age:30})
}
function remove(){
// 清除所有
emitter.all.clear();
}
function removeEvent1(){
emitter.off('event1');
}
return {triEvent,remove,removeEvent1};
}
}
</script>
<style>
</style>