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

一、安装 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>

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