代码地址：

https://github.com/hurong241/vue_study/tree/master/vue2-cli/src/components/86

本例中实现与vue组件间通讯方法1-props实现列表综合实例/附id库安装方法 (hu-rong.com)中相同的功能，但代码改动不多

在main.js中定义全局事件总线

//引入Vue
import Vue from 'vue'
//引入组件
import App from './App86.vue'
//引入插件
import plugins from './plugins'
//关闭生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(plugins)
//创建vm
new Vue({
    render: h => h(App),
    //全局事件总线
    beforeCreate() {
        Vue.prototype.$bus = this
    }
}).$mount('#app')

TableContainer.vue

template处不再用类似这种方式传递方法给子组件（<TableList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"></TableList>）

在mounted()中给全局事件总线绑定事件，并在beforDestroy中销毁事件

<template>
  <div class="container">
    <!--传method及数据给组件-->
    <TableTop></TableTop>
    <TableList :todos="todos"></TableList>
    <TableFoot :todos="todos"></TableFoot>
  </div>
</template>

<script>
import TableTop from "@/components/86/TableTop";
import TableList from "@/components/86/TableList";
import TableFoot from "@/components/86/TableFoot";

export default {
  name: 'table-container',
  components: {
    TableTop,
    TableList,
    TableFoot
  },
  data() {
    return {
      todos: JSON.parse(localStorage.getItem('todos')) || []//从存储中取数据,无则返回空数组
    };
  },
  methods: {
    //接收来自top组件的数据
    addTodo(value) {
      console.log('收到TableTop回传的数据', value)
      this.todos.unshift(value)
    },
    //勾选或取消勾选
    checkTodo(id) {
      console.log(id)
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.done = !todo.done
      })
    },
    //删除
    deleteTodo(id) {
      this.todos = this.todos.filter((todo) => {
        if (todo.id !== id) return todo
      });
    },
    //全选或全不选
    checkAll(e) {
      this.todos.forEach((todo) => {
        todo.done = e.target.checked
      })
    },
    //清除所有已选
    clearAllChecked() {
      console.log('删除所有勾选')
      this.todos = this.todos.filter((todo) => {
        return !todo.done
      })
    }
  },
  watch: {
    //在这里统一深度监视todos变化，只要变化就重新存储
    'todos': {
      deep: true,//一条数据中的某个字段值变化也监视
      handler(oldValue, newValue) {
        console.log('todo中数据变化', oldValue, newValue)
        localStorage.setItem('todos', JSON.stringify(oldValue))
      },
    }
  },
  mounted() {
    //全局事件总线实现
    this.$bus.$on('addTodo', this.addTodo)
    this.$bus.$on('checkTodo', this.checkTodo)
    this.$bus.$on('deleteTodo', this.deleteTodo)
    this.$bus.$on('checkAll', this.checkAll)
    this.$bus.$on('clearAllChecked', this.clearAllChecked)
  },
  beforeDestroy() {
    //解绑全局事件
    this.$bus.off(['addTodo', 'checkTodo', 'deleteTodo', 'checkAll', 'clearAllChecked'])
  }
}
</script>

<style scoped>
.container {
  border: 1px solid #aaa;
  padding: 10px;
}
</style>

TableTop.vue

不需要再在props中接收，触发及传参方式：this.$bus.$emit('addTodo', todoObj)

<template>
  <div>
    <label>
      <input placeholder="请输入" type="text" v-model="title" @keyup.enter="add">
    </label>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'

export default {
  name: 'table-top',
  data() {
    return {
      title: '',
    }
  },
  methods: {
    add() {
      //const title = e.target.value.trim()//不建议这样，尽量用vm操作
      const title = this.title.trim()
      if (!title) return alert('请输入')//空输入过滤
      //生成id库安装方法：npm i nanoid
      const todoObj = {id: nanoid(), title: title, done: false}
      console.log('由TableTop生成的todoObj:', todoObj)
      //通过TableContainer传过来的接收函数，将todos回传给TableContainer
      this.$bus.$emit('addTodo', todoObj)
      //清空输入框
      //e.target.value=''//不建议这样操作，尽量用vm操作
      this.title = ''
    }
  },
  //接收从TableContainer传过来方法
  props: []
}
</script>

<style scoped>
input {
  padding: 5px;
  border-radius: 5px;
}
</style>