这篇文章主要介绍“vue中消息订阅与发布如何使用”,在日常操作中,相信很多人在vue中消息订阅与发布如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中消息订阅与发布如何使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
成都创新互联专业为企业提供金州网站建设、金州做网站、金州网站设计、金州网站制作等企业网站建设、网页设计与制作、金州企业网站模板建站服务,十余年金州做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
消息订阅与发布是一种组件间通信的方式,适用于任意组件间通信。能更好的实现组件间通信(消息订阅与发布就像是送报员一样。好比小a向报社订阅了一份报纸,然后在报社留下了自己的信息,然后送报员就按着小a留下的信息找到了小a所在的地方将报纸送给了他)
1.首先我们要安装pubsub,打开vscode→打开终端→输入一下安装命令(也可以在cmd进行安装)
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) }
我们应该先找到想要接受数据的组件,配置一个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();}
1.语法:this. $nextTick(回调函数)
2.作用:放在$nextTick 当中的操作不会立即执行,而是等数据更新,DOM更新完成之后再执行
3.使用时机:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
到此,关于“vue中消息订阅与发布如何使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
分享文章:vue中消息订阅与发布如何使用
转载源于:https://www.cdcxhl.com/article40/ipeheo.html
成都网站建设公司_创新互联,为您提供服务器托管、App设计、微信公众号、自适应网站、手机网站建设、品牌网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联