ToDoList全局事件总线学习笔记

全局事件总线

全局事件总线：任意组件间通信

安装全局事件总线

new Vue({
    ……
    beforeCreate(){
        Vue.prototype.$bus=this
    },
    ……
})
1
2
3
4
5
6
7

使用事件总线

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
        demo(data){

        }

        mounted(){
            this.$bus.$on('xxx',this.demo)
        }
    }
1
2
3
4
5
6
7
8
9

提供数据：this.$bus.$emit(‘xxx’,this.demo)

注意

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

ToDoList中的实践

通过全局事件总线实现item给app传值。

1. 安装全局事件总线

import Vue from 'vue'
import App from './App.vue'

// 关闭vue的生产提示
Vue.config.productionTip = false;

new Vue({
    el: '#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

2. App.vue与MyList.vue中的操作
   App.vue取消给List传的方法，MyList取消props接收的方法

3. Item给App传递数据
   app收数据，app绑定事件总线的自定义事件

  mounted() {
    this.$bus.$on('checkTodo', this.checkTodo)
    this.$bus.$on('deleteTodo', this.deleteTodo)
  },
  beforeDestroy() {
    this.$bus.$off('checkTodo')
    this.$bus.$off('deleteTodo')
  }
1
2
3
4
5
6
7
8

4. 触发

methods: {
    handleCheck(id) {
      this.$bus.$emit('checkTodo',id)
    },
    handleDelete(id) {
     
      if (confirm('确定删除吗？')) {
           this.$bus.$emit('deleteTodo', id)
      }
      
    }
  },

          this.$bus.$emit('deleteTodo', id)
      }
      
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18