「后端小伙伴来学前端了」Vue中全局事件总线（GlobalEventBus）原理及探究过程

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

// 回车增加一个todo
addTodo (todo) {
    this.todos.unshift(todo)
},
    // 判断勾选不勾选
    checkTodo (id) {
        this.todos.forEach((todo) => {
            if (todo.id === id) todo.done = !todo.done
        })
    },
        // 删除一个todo
        deleteTodo (id) {
            this.todos = this.todos.filter(todo => todo.id !== id)
        },
            // 全选全不选
            checkAllTodos (done) {
                this.todos.forEach((todo) => { todo.done = done })
            },
                // 清除所有已完成的任务
                clearDoneTodos () {
                    this.todos = this.todos.filter(todo => !todo.done)
                }
},
    // 在加载完成后就进行全局总线的绑定
    mounted () {
        this.$bus.$on('addTodo', this.addTodo)
        this.$bus.$on('checkTodo', this.checkTodo)
        this.$bus.$on('deleteTodo', this.deleteTodo)
    },

methods: {
    add () {
      // 1. 检查输入合法性
      const title = this.title.trim()
      if (!title) {
        alert('请输入内容')
        return
      }
      const id = uuidv4()
      // 2. 根据输入生成一个todo对象
      const todo = { id, title, done: false }
      // 3. 添加到todos
      this.$bus.$emit('addTodo', todo)
      // 4. 清除输入
      this.title = ''
    }
  }
}