怎么在vue中利用组件传值实现观察者模式 - 行业资讯 - 肥雀云

　　介绍

怎么在vue中利用组件传值实现观察者模式?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

Vue.prototype Bus 美元;=,new vue ()

我们往vue的原型里注册了一个全局变量美元的公共汽车,他的值是vue的实例,也就是说,到现在为止,公交车里美元边有了vue所有的属性和方法,这下就好操作了

第二步,我们开始发送消息

这就很符合观察者模式的发布订阅模式

我们在组件1中写如下代码:

& lt; template> 　　,,,& lt; div> 　　,,,,,,,& lt; button @click=皊end"在发送& lt;/button> 　　,,,& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　export default { 　　,,,方法:,{ 　　,,,,,,,send (), { 　　,,,,,,,,,,,这个。汽车。释放美元(“send" & # 39;接收的信息& # 39;) 　　,,,,,,,} 　　,,,} 　　} 　　& lt;/script>

点击按钮发送一条信息,这个按钮也就是充当发布者,我们用到vue美元的发出了这个api,那么订阅者是什么呢?我不说你也应该想到了,对,就是他

第三步,在组件三中接收消息

& lt; template> 　　,,,& lt; div> 　　,,,,,,,{{消息}} 　　,,,& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　export default { 　　,,,data (), { 　　,,,,,,,return { 　　,,,,,,,,,,,的信息:,& # 39;& # 39; 　　,,,,,,,} 　　,,,}, 　　,,,mounted (), { 　　,,,,,,,这个。汽车。美元(& # 39;发送# 39;,,(味精),=祝辞,{ 　　,,,,,,,,,,,this.message =,味精　　,,,,,,,}) 　　,,,} 　　} 　　& lt;/script>

就是用美元在这个属性充当接收者

从上可以看的出,vue很多地方用到了观察者的思想,包括他的双向绑定也是如此

vue的机制

怎么在vue中利用组件传值实现观察者模式

从上图我们可以看的出,vue是通过Object.defineProperty实现对数据的劫持,然后中间做了一个中转,最后渲染到vue层。

我们可以肯定的是,vue.js借鉴了观察者模式,但是我感觉还是有点区别的,观察者模式跟注重的是事件驱动,比如我买房这个动作,第一次和销售了解可能没有合适的房源,然后销售就会跟你说:“如果有合适的房源我们会第一时间通知你& # 39;,当有新房源的时候他会给你打电话通知你,这一系列的根源是买房这个事件,他驱动了整套流程。而vue我们都知道是数据驱动,也就是只里有数据的值发生改变的话,Object.defineProperty才会对他劫持,从而去更新dom,触发视图的更新。

那么有没有更符合观察者模式特征的?

当然是node . js的事件事件了。

首先我们看看事件的工作流程:

var events =,要求(& # 39;事件# 39;);//,创建,eventEmitter 对象　　var eventEmitter =, new events.EventEmitter ();//,创建事件处理程序　　var connectHandler =, function 连接(),{ 　　,,console.log(& # 39;连接成功# 39;公司); 　　,,//,触发,data_received 事件, 　　,,eventEmitter.emit (& # 39; data_received& # 39;); 　　}//,绑定,connection 事件处理程序　　eventEmitter.on(& # 39;连接# 39;,,connectHandler);//,使用匿名函数绑定,data_received 事件　　eventEmitter.on (& # 39; data_received& # 39;,,函数(){ 　　,,console.log(& # 39;数据接收成功# 39;公司); 　　});//,触发,connection 事件, 　　eventEmitter.emit(& # 39;连接# 39;); 　　console.log(“程序执行完毕!”);

输出一下:

怎么在vue中利用组件传值实现观察者模式