组件之间传统的事件传递,两个组件之间要关联,很不好用。在这里我们用到的是mitt。相当把事件放到了一个公共的地方。任何组件直接拿来调用即可。用起来非常方便。
1、先安装mitt npm i mitt
2、创建/utils/emitter.ts代码如下
//引入mitt import mitt from 'mitt' //调用 mitt 得到emitter,emitter能 绑定事件、触发事件 const emitter=mitt(); // //绑定事件 // emitter.on('test',()=>{ // console.log('test 被调用了') // }) // //触发事件 // emitter.emit('test') // //解绑事件 // emitter.off('test') // //解绑所有事件 // emitter.all.clear() //向外暴露emitter export default emitter
3、创建HelloWorld.vue组件绑定test事件 代码如下
<template> <div class="HelloWorld"> <h1>HelloWorld</h1> </div> </template> <script setup name="HelloWorld"> //引入emitter.ts import emitter from '@/utils/emitter.ts' import { onUnmounted } from 'vue'; //test为事件名, value 是传入的参数,可以添加多个参数 emitter.on('test',(value)=>{ console.log('组件HelloWorld里面的事件',value) }) //组件卸载时解绑test事件,从而释放减少对内存的占用 onUnmounted(()=>{ emitter.off('test') }) </script>
4、创建TestComponent.vue组件调用HelloWorld.vue里面test事件,代码如下
<template> <div class="TestComponent"> <h1>TestComponent</h1> </div> </template> <script setup name="TestComponent"> import emitter from '@/utils/emitter.ts' //触发HelloWorld.vue组件绑定test事件 emitter.emit('test', '组件TestComponent传入的参数') </script>
本文来自www.luofenming.com