vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线

@[toc]

改动的地方

注意点1：使用地方App和MyItem之间使用全局事件总线，之前方式是App传给MyList，然后MyList再传给MyItem，之前缺陷是MyList只作为传递着啥都不干，显得太绕圈，太多余。

main.js

new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
})

App.vue

methods: {
//勾选or取消勾选一个todo
    checkTodo(id){
        this.todos.forEach((todo)=>{
            if(todo.id === id) todo.done = !todo.done
        })
    }
},
mounted() {
    this.$bus.$on('checkTodo',this.checkTodo)
    this.$bus.$on('deleteTodo',this.deleteTodo)
},
beforeDestroy() {
    this.$bus.$off('checkTodo')
    this.$bus.$off('deleteTodo')
},

MyItem.vue

methods: {
    //勾选or取消勾选
    handleCheck(id){
        //通知App组件将对应的todo对象的done值取反
        // this.checkTodo(id)
        this.$bus.$emit('checkTodo',id)
    },
    //删除
    handleDelete(id){
        if(confirm('确定删除吗？')){
            //通知App组件将对应的todo对象删除
            // this.deleteTodo(id)
            this.$bus.$emit('deleteTodo',id)
        }
    }
},

案例全部代码

main.js

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
})

App.vue

App.vue

MyHeader.vue

MyHeader.vue

MyList.vue

MyList.vue

MyItem.vue

MyItem.vue

MyFooter.vue

MyFooter.vue

本人其他相关文章链接

1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章：vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章：vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》：使用vue脚手架创建项目

5.vue2知识点：数据代理

6.vue2知识点：事件处理

7.vue2知识点：列表渲染（包含：v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测）

8.vue2知识点：计算属性与监听属性

9.vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）

10.vue2知识点：非单文件组件和单文件组件

11.vue2知识点：组件is属性

12.vue2知识点：组件模板定义

13.vue2知识点：组件的props属性、非props属性、props属性校验

14.vue2知识点：组件自定义事件

15.vue2知识点：组件插槽分发

16.vue2知识点：动态组件

17.vue2知识点：混入

18.vue2知识点：浏览器本地缓存

19.vue2知识点：全局事件总线（GlobalEventBus）

20.vue2知识点：消息订阅与发布

21.vue2知识点：nextTick语法

22.vue2知识点：Vue封装的过度与动画

23.vue2知识点：路由

24.vue2知识点：vm调用待$命令介绍

25.vue组件通信案例练习（包含：父子组件通信及平行组件通信）

26.vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习：待办事项Todo-list案例练习

28.vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习：把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习：把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结