「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信

//想要成为事件总线的条件：
//1、所有的组件对象必须都能看得到这个总线对象，因此我们把这个对象放在了Vue原型
//2、这个事件总线对象必须能调用$on和$emit方法（总线对象必须是Vue的实例化对象或者是组件对象）

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 关于全局总线的使用说明
// 使用全局总线的时候，更好的应用是在兄弟组件、祖孙组件之间，这些组件他们并不能做到直接通信，这个使用全局事件总线会方便很多
new Vue({
  render: h => h(App),
  // beforeCreate 位于数据挂载之前的生命周期函数
  beforeCreate () {
    // 安装全局事件总线
    Vue.prototype.$bus = this
  }
}).$mount('#app')

<template>
    <div class="todo-container">
        //数据的传递，还是用props快哈
      <Demo :msg="msg"></Demo>
  </div>
</template>
<script>
import Demo from './components/Demo'
export default {
  components: {
    Demo
  },
  data () {
    return {
      msg: 'hello,你好'
    }
  },
  methods: {
    updateMsg () {
      this.msg = 'hello,你好丫，我是博主宁在春'
    },
    updateMsg2 (value) {
      this.msg = value
    }
  },
  // 在加载完成后就进行全局总线的绑定
  mounted () {
    // 绑定方法，'updateMsg'是全局事件总线方法名，而后面是回调时需要执行的方法
    this.$bus.$on('updateMsg', this.updateMsg)
    this.$bus.$on('updateMsg2', this.updateMsg2)
  },
  // 养成习惯 在组件销毁的时候，将事件进行解绑
  beforeDestroy () {
    //就是解绑事件，有多种方式，参数为空，直接是让所有方法解绑
    //多个的时候，可以直接放一个数组进去。
    // this.$bus.$off(['updateMsg',....])
    this.$bus.$off('updateMsg')
    this.$bus.$off('updateMsg2')
     // 原理就让我留到下次吧，兄弟们
  }
}
</script>

<template>
  <div>
    <h1>{{msg}}</h1>
    <button @click="updateMessage()">点击修改</button>
    <button @click="updateMessage2('你好丫，宁在春')">点击修改</button>
  </div>
</template>
<script>
export default {
  props: {
    msg: String
  },
  methods: {
    updateMessage () {
      // 通过全局事件总线来进行交互，
      //第一个参数是要 回调父组件中的方法名，后面可以跟参数，多个或者对象都可以
      this.$bus.$emit('updateMsg')
    },
    updateMessage2 (value) {
      this.$bus.$emit('updateMsg2', value)
    }
  }
}
</script>