Bus – 事件总线
原理:创建一个空的Vue实例,来作为交互的中介
1、创建事件总线
新建一个文件夹bus,在文件夹中新建一个文件 bus.js (也可以不要)
在文件 bus.js 建立以下代码
import Vue from 'vue'
const Bus = new Vue()
export default Bus
3. 在 main.js 导入 bus.js ````js import Bus from "./bus"; Vue.prototype.$bus = Bus;
2、使用事件总线
调用方法:this.$bus
基本就是给 b u s 绑 定 各 种 东 西 , 然 后 调 用 bus绑定各种东西,然后调用 bus绑定各种东西,然后调用bus获取
- 给bus绑定事件
<button @click="handleClick">按我</button> // html methods: { // js handleClick() { this.$bus.$emit('on-click', 'hello') } }
- 获取
mounted() { this.$bus.$on('on-click', mes => { this.message = mes }) }