第四课时-vue状态管理Bus

41次阅读

共计 472 个字符,预计需要花费 2 分钟才能阅读完成。

Bus 相当于广播和分发事件的方法。vue 如何实现非父子组件间的通信,可以通过实例一个 vue 实例 Bus 作为媒介,要相互通信的兄弟组件之中,都引入 Bus,然后通过分别调用 Bus 事件触发和监听来实现通信和参数传递。

Bus.js 文件:

import Vue from 'vue'
export default new Vue()

在需要通信的组件都引入 Bus.js

import Bus from '../common/js/bus.js'

添加一个 button,点击后 $emit 一个事件

<button @click="toBus"> 子组件传给兄弟组件 </button>

methods

methods: {toBus () {Bus.$emit('on', '来自兄弟组件')
    }
  }

另一个组件也 import Bus.js 在钩子函数中监听 on 事件

import Bus from '../common/js/bus.js'
export default {data() {
      return {message: ''}
    },
    mounted() {Bus.$on('on', (msg) => {this.message = msg})
     }
   }

正文完
 0