消息订阅与发布+$nextTick

1、消息订阅与发布pubsub

1. 一种组件间通信的方式，适用于任意组件间通信。

2.使用步骤:

        1.安装pubsub: npm i pubsub-js

        2.引入: import pubsub from 'pubsub-js'

        3.接收数据: A组件想接收数据,则在A组件中订阅消息，订阅的回调留在A组件自身。

methods:{

    demo(data)
    .......

}

    ....

mounted() {

    this.pid = pubsub. subscribe('xxx',this.demo) //订阅消息

}

4.提供数据: pubsub.publish('xxx',数据)

5.最好在beforeDestroy钩子中,用pubsub.unsubscribe(pid)去取消订阅。

School组件

mounted() {
            // console.log('School',this)
            /* this.$bus.$on('hello',(data)=>{
                console.log('我是School组件，收到了数据',data);
            }) */
            this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
                console.log(this);
                // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data);
            })
        },
beforeDestroy() {
     // this.$bus.$off('hello')
     pubsub.unsubscribe(this.pubId)
},

Student组件

methods:{
     sendStudentName(){
         // this.$bus.$emit('hello',this.name)
         pubsub.publish('hello',666)
           
}

2、$nextTick

下一轮获取焦点

<input type="text" 
                :value="todo.title" 
                v-show="todo.isEdit" 
                @blur="handleBlur(todo,$event)" 
                ref="inputTitle"
            >

this.$nextTick(function(){
                    this.$refs.inputTitle.focus()
                })