【vue3】实现公共搜索组件，在当前页搜索的路由跳转不能改变当前值的操作，使用bus / event-emitter 派发器

本文介绍了如何通过安装event-emitter插件，创建bus.ts文件来建立一个事件中心，然后在Vue的组件中分别进行事件的发射和监听，以此实现组件间的通信。在search.vue组件中触发搜索事件并传递参数，而在index.vue组件中接收并处理这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

1、安装 bus 插件

cnpm install --save event-emitter
或
cnpm i --save-dev @types/event-emitter

2、创建 bus.ts 文件

（1）在utils下创建bus.ts

（2）bus.ts 代码如下

import ee from 'event-emitter'
export default ee()

3、页面使用

（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>

（3）退出当前页面销毁组件

onUnmounted(() => {
  bus.off('keyWordName', ()=>{})
})

方法二：

1、解决出现多次触发的情况

onMounted(() => {
  添加触发器
  window.addEventListener('eventActive', load)
})

onUnmounted(() => {
  // 清除触发器
  window.removeEventListener('eventActive', load)
})

const load = () => {
  // 数据处理
}

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~