vue2:
在main.js 文件中定义中央事件总线并挂载到vue原型上
import Vue from 'vue' const bus=new Vue()
Vue.prototype.bus=bus
组件1: 通过按钮触发
this.$bus.emit('send',{name:'蔡徐坤'})
组件2:接收
this.$bus.on('sned',(e)=>{console.log(e)})
vue3
安装mitt插件(npm官网www.npmjs.com/package/mit…
npm i --save mitt
复制代码
创建bus.js
import mitt from 'mitt'
const $bus=mitt()
export default $bus;
复制代码
在组件1中引入点击按钮触发$bus.emit传值
import $bus from '../utils/bus'
const sendtoChild=()=>{
$bus.emit('send',{name:'蔡徐坤'})
}
复制代码
在组件2中引入在onMounted中使用$bus.on接收
import $bus from '../utils/bus'
import { onMounted,ref } from 'vue';
const sname=ref(null)
onMounted(() => {
$bus.on('send', (e) => {
console.log(e);//{name:'蔡徐坤'}
sname.value=e.name
})
})