vue组件之间的通信 vue-bus

vue-bus的使用

vue-bus地址: www.npmjs.com/package/vue…

1、第一步：安装

yarn add vue-bus
npm install vue-bus --save

2、第二步：main.js文件中注册

import Vue from 'vue'
import VueBus from 'vue-bus'

Vue.use(VueBus)

第三步：使用

1、在想传递出去的页组件中某个方法里面触发事件

下面触发了一个叫做handleClick的事件，并传递了值{ text: 'vue-bus传递的数据' }

  handleClick() {
    this.$nextTick(() => {
      this.$bus.emit('sendData', { text: 'vue-bus的数据' })
    })
  },

2、接收数据的页面监听触发的事件

created() {
  this.getData()
},
beforeDestroy() {
  this.takeOffEventBus()
}
methods: {
  // 监听vue-bus
  getData() {
    this.$bus.on('sendData', this.getDataFn)
  },
  // 获取数据
  getDataFn(data) {
    // to do something ...
    console.log(data)
  },
  // 销毁
  takeOffEventBus() {
    this.$bus.off('sendData', this.getDataFn)
  },
 }