vue bus 事件总线 非父子之间通信

如果项目非父子之间通信多需要使用Vuex来管理状态,如果项目中非父子传值较少,则可以使用bus事件总线来通信
main.js:

// 事件总线
Vue.prototype.$bus = new Vue({})

例子:
在 emit.vue 中:

<script>
  export default {
    name: "emit",
    data() {
      return {
        params: null
      }
    },
    methods: {
      add() {
        this.$bus.$emit('add', this.params) //params: 可传参数
      }
    }
  }
</script>

在 on.vue 中:

    data() {
      return {
        count: 0
      }
    },
    mounted() {
      this.$bus.$on('add', function(params) {
        // 回调函数
        this.count += 1
      })
    },
    //******一般在组件销毁前取消事件
    beforeDestroy() {
      this.$bus.$off('add')
    }