vue消息订阅与发布

任意组件之间互相通信

1、安装pubsub

npm i pubsub-js

2、引入pubsub库

import pubsub from 'pubsub-js'

3、接收数据

a组件想接受数据，则在a组件中订阅消息，订阅的回调留在a组件自身

methods: {
     demo(data){}
   },
   mounted() {
     this.pid=pubsub.subscribe('xx',this.demo)
   },

4、提供数据

pubsub.publish('xxx',数据)

5、取消订阅

最好在beforeDestroy钩子中，取消订阅

PubSub.unsubscribe(pid)

$nextTick指定的回调会在dom更新完之后决定，在下一次，当改编数据之后，要基于更新后的新dom进行某次操作时

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

ref用法补充

ref 有三种用法：

1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素

2、ref 加在子组件上，用this.r e f s . （ r e f 值 ） 获 取 到 的 是 组 件 实 例 ， 可 以 使 用 组 件 的 所 有 方 法 。 在 使 用 方 法 的 时 候 直 接 t h i s . refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）.方法（） 就可以使用了。

3、利用 v-for 和 ref 获取一组数组者dom 节点

加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String）

ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。