Vue总线Bus兄弟组件传参
2019-09-28 本文已影响0人
AI晓晓
一、前言
使用场景：在vue项目较小的情况，使用bus总线思路来完成vuex的传值功能。
二、内容
、、、
//util.js
export default class Bus {
constructor() {
this.callbacks = {}
}
$on(name, fn) {
this.callbacks[name] = this.callbacks[name] || []
this.callbacks[name].push(fn)
}
$emit(name, args) {
if (this.callbacks[name]) {
// 存在 遍历所有callback
this.callbacks[name].forEach(cb => cb(args))
}
}
}
//mai.js
import Bus from './utils/bus'
Vue.prototype.$bus = new Bus()
//组件A
this.$bus.$on('log', content => {
console.log(content)
})
//组件B
this.$bus.$emit('log', 120)
//父组件
<template>
<div class="home">
<demo1 :msg1="msg111" />
<demo2 :msg2="msg222" />
</div>
</template>
、、、
总结：
Vue-Bus是一种总线思想，即各个兄弟组件通过Bus（即Vue实例）进行参数传递！
