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()
})