vue2/vue3 bus总线传值

82 阅读1分钟

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
    })
})