先安装 mitt
npm install mitt |
# 1.App.vue
App 与 eventbus.js 文件为根组件 下面 Home 与 About 例子都被引用
// App.vue | |
<template> | |
<div> | |
<home/> | |
<about/> | |
</div> | |
</template> | |
<script> | |
import Home from './Home.vue'; | |
import About from './About.vue'; | |
export default { | |
components: { | |
Home, | |
About | |
} | |
} | |
</script> | |
<style scoped></style> |
# 2.js 文件
// eventbus.js | |
import mitt from 'mitt'; | |
const emitter = mitt(); | |
// 可以创建多个 mitt 对象 | |
// export const emitter1 = mitt(); | |
// export const emitter2 = mitt(); | |
// export const emitter3 = mitt(); | |
export default emitter; |
# 3. 监听单一事件
# About.vue 组件
<template> | |
<div> | |
<button @click="btnClick">按钮点击</button> | |
</div> | |
</template> | |
<script> | |
import emitter from './eventbus'; | |
export default { | |
methods: { | |
btnClick() { | |
console.log("about按钮的点击"); | |
emitter.emit("Neko", {name: "Neko", age: 16}); // 发出事件：事件名与参数 | |
} | |
} | |
} | |
</script> | |
<style scoped></style> |
# Home.vue 组件
<template> | |
<div></div> | |
</template> | |
<script> | |
import emitter from './eventbus'; | |
export default { | |
created() { | |
// 监听到事件名后执行回调函数. | |
emitter.on("Neko", (info) => { | |
console.log("Home.vue:", "info",info); | |
}); | |
} | |
} | |
</script> | |
<style scoped></style> |
参考结果：
# 4. 监听所有事件
# About.vue 组件
<template> | |
<div> | |
<button @click="btnClick">按钮点击</button> | |
</div> | |
</template> | |
<script> | |
import emitter from './eventbus'; | |
export default { | |
methods: { | |
btnClick() { | |
console.log("about按钮的点击"); | |
emitter.emit("Neko", {name: "Neko", age: 16}); // 发出事件 事件名与参数 | |
emitter.emit("Nico", {name: "Nico", age: 16}); // 发出事件 事件名与参数 | |
} | |
} | |
} | |
</script> | |
<style scoped></style> |
# Home.vue 组件
<template> | |
<div></div> | |
</template> | |
<script> | |
import emitter from './eventbus'; | |
export default { | |
created() { | |
// 监听到事件名后执行回调函数. | |
//type: 事件名 info: 参数 | |
emitter.on("*",(type,info) => { | |
console.log("listener * :",type,info); | |
}) | |
} | |
} | |
</script> | |
<style scoped></style> |
参考结果：
# 5.Mitt 事件取消
# 1. 取消 emitter 中所有的监听
Home.vue
<template> | |
<div></div> | |
</template> | |
<script> | |
import emitter from './eventbus'; | |
export default { | |
created() { | |
// 监听到事件名后执行回调函数. | |
//type: 事件名 info: 参数 | |
emitter.on("*",(type,info) => { | |
console.log("listener * :",type,info); | |
}) | |
let counter = 3; | |
// 定义一个 2s 倒计时，取消所有注册的函数监听 | |
let timer = setInterval(() => { | |
counter-- | |
if(counter === 1 ){ | |
clearInterval(timer) | |
emitter.all.clear() // 取消 emitter 中所有的监听 | |
} | |
console.log(`还剩${counter}s取消所有监听`); | |
}, 1000); | |
} | |
} | |
</script> | |
<style scoped></style> |
参考结果：
# 2. 取消 emitter 中某个监听
Home.vue
<template> | |
<div></div> | |
</template> | |
<script> | |
import emitter from './eventbus'; | |
export default { | |
created() { | |
// 监听到事件名后执行回调函数. | |
function onFoo(params) { | |
console.log("Nico已被监听"); | |
} | |
emitter.on("Nico",onFoo) | |
let counter = 3; | |
// 定义一个 2s 倒计时，取消注册 (目前监听了一个为：Nico) 的函数监听 | |
let timer = setInterval(() => { | |
counter-- | |
if(counter === 1 ){ | |
clearInterval(timer) | |
emitter.off("Nico",onFoo) // 取消 emitter 中某个监听 | |
setTimeout(() => { | |
console.log("已经取消对 Nico 的监听"); | |
}, 1000); | |
} | |
console.log(`还剩${counter}s取消对 Nico 监听`); | |
}, 1000); | |
} | |
} | |
</script> | |
<style scoped></style> |
参考结果：
# 6. 总结
- emitter.emit 用于发出事件 (有两个参数分别是事件名与要传递的数据)
- emitter.on 用于监听事件名后执行回调函数。第一个参数就是函数名，第二个参数是一个回调函数，回调函数中有个参数就是传递的数据
- emitter 监听所有事件，第一个参数 用 * 号代替事件名，第二个参数返回回调函数。回调函数有两个参数 type 与 data (type 为事件名，data: 为数据)
- emitter.all.clear () 取消对所有函数的监听
- emitter.off ("Nico",onFoo) 取消对某一个函数的监听：Nico 为事件名，第二个为回调函数名，因此需要对回调函数起个名字。
