一、安装 bus 插件
cnpm install --save event-emitter二、创建 bus.ts 文件
1、在utils下创建bus.ts
2、bus.ts 代码如下
import ee from 'event-emitter'
export default ee()三、页面使用
1、搜索的公用组件页面，search.vue
<el-input v-model.trim="keyword" placeholder="搜索关键词" @keyup.enter="onToSearch"></el-input>
<script lang='ts' setup>
// 引入
import bus from "@/utils/bus";
const keyword=ref('')
// 搜索
const onToSearch=()=>{
// 触发传参
bus.emit('keyWordName', keyword.value)
}
</script>2、需要调用搜索组件的当前页 index.vue
<Search></Search>
<script lang='ts' setup>
// 引入
import bus from "@/utils/bus";
import Search from "@/components/search.vue";
// 获取组件传递过来的参数
bus.on('keyWordName', (name: string) => {
})
</script>希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
