vue12

目录

全局事件总线（GlobalEventBus）

消息订阅与发布(pubsub)

nextTick

全局事件总线（GlobalEventBus）

1.一种组件间通信的方式，适用于任意组件间通信。
2.安装全局事件总线:

new Vue({
    el:'#app',
   render:h=>h(App),
   beforeCreate() {
    Vue.prototype.$bus=this//安装全局事件总线,$bus就是当前应用的vm
   },
})

3.使用事件总线:

 1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
methods(){
demo(data){......}}
mounted(){
this.$bus. $on( 'xxxx ',this.demo)}
 

⒉.提供数据:this.$bus.$emit( ' xxxx',数据)

 

接收数据

nextTick

1.语法:this.$nextTick(回调函数)
2.作用:在下一次DOM更新结束后执行其指定的回调。
3.什么时候用:当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。 

 //编辑
        handleEdit(todo) {
            if (todo.hasOwnProperty('isEdit')) {
                todo.isEdit = true
            } else {
                this.$set(todo, 'isEdit', true)
            }
            this.$nextTick(function () {
                this.$refs.inputTitle.focus()
            })
        },
        //失去焦点回调（真正执行修改逻辑）
        handleBlur(todo, e) {
            todo.isEdit = false
            if (!e.target.value.trim()) return alert('输入不能为空！')
            this.$bus.$emit('updataToDo', todo.id, e.target.value)

        }