这篇文章主要介绍“vue中消息订阅与发布如何使用”，在日常操作中，相信很多人在vue中消息订阅与发布如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中消息订阅与发布如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
1.什么是消息订阅与发布
消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信。能更好的实现组件间通信（消息订阅与发布就像是送报员一样。好比小a向报社订阅了一份报纸，然后在报社留下了自己的信息，然后送报员就按着小a留下的信息找到了小a所在的地方将报纸送给了他）
2.如何使用pubsub
首先我们要安装pubsub,打开vscode→打开终端→输入一下安装命令（也可以在cmd进行安装）
npm i pubsub-js
引入（在需要使用pubsub的组件内引入即可）
import pubsub from ' pubsub-js'
接收数据A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods(){demo(data){.....}mounted() {this.pid = pubsub. subscribe( 'xx'，this . demo) }
我们应该先找到想要接受数据的组件，配置一个mounted的配置项，进行消息的订阅subscribe这个单词也有订阅的意思，也就是下面这个组件就是小a的角色，他要订阅一份报纸，然后留下了自己的住址'hello',再利用回调获取数据，这里的msgName，data分别是订阅名和数据（也就是小a的家庭住址和送报员所携带的报纸）
import pubsub from "pubsub-js";export default { name: "School", data() { return { name: "山鱼特效屋", address: "南京北城区" }; }, mounted() { this.pubId = pubsub.subscribe("hello", (msgName, data) => { console.log("该消息已经发布", msgName, data); }); }, //使用完之后销毁该绑定事件避免后期错误使用 beforeDestroy() { pubsub.unsubscribe(); }};
提供数据
pubsub. publish( ' xxx' ,数据)
publish方法的第一个参数'hello'为订阅名，第二个参（this.name）为想要传递的数据。
import pubsub from "pubsub-js";export default { name: "Student", data() { return { name: "张三", sex: "男" }; }, // 配置一个methods项 methods: { snedStudentName() { // 选择给谁提供数据 pubsub.publish("hello", this.name); } }};
最好在beforeDestroy钩子中去取消订阅。
beforeDestroy() {pubsub.unsubscribe();}
3.nextTick
语法:this. $nextTick(回调函数)
作用：放在$nextTick 当中的操作不会立即执行，而是等数据更新，DOM更新完成之后再执行
使用时机:当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
到此，关于“vue中消息订阅与发布如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
