导航：首页 > 互联网科技 >

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

发表于：2024-11-23 作者：千家信息网编辑

千家信息网最后更新 2024年11月23日，今天小编给大家分享一下如何在vue中利用组件传值实现观察者模式的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下

千家信息网最后更新 2024年11月23日如何在vue中利用组件传值实现观察者模式

今天小编给大家分享一下如何在vue中利用组件传值实现观察者模式的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

第一步，我们先在main.js中注册一下bus

Vue.prototype.$Bus = new Vue()

我们往vue的原型里注册了一个全局变量$Bus，他的值是vue的实例，也就是说，到现在为止，$Bus里边有了vue所有的属性和方法，这下就好操作了

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

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

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

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

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

就是用$on这个属性充当接收者

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

vue的机制

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

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

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

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

首先我们看看events的工作流程：

var events = require('events');// 创建 eventEmitter 对象var eventEmitter = new events.EventEmitter();// 创建事件处理程序var connectHandler = function connected() {   console.log('连接成功。');   // 触发 data_received 事件    eventEmitter.emit('data_received');}// 绑定 connection 事件处理程序eventEmitter.on('connection', connectHandler);// 使用匿名函数绑定 data_received 事件eventEmitter.on('data_received', function(){   console.log('数据接收成功。');});// 触发 connection 事件 eventEmitter.emit('connection');console.log("程序执行完毕。");

输出一下：

这就完全符合观察者的工作模式，由emit发布，由on接收。所以说，node.js提供了很好的监听机制，还有他对整个事务的处理。其支持了nodejs最特色的I/O模式，比如我们启动http服务时会监听其 connect / close，http.request时会监听 data / end等。

还有没有类似的案例呢？

当然，js有一个事件监听者----addEventListener,也有点观察者的意思，具体用法我就不说了，想必大家用的都很熟悉。

其实只要你认真想一想，还是有很多地方有观察者的身影的，最简单的就是一个点击事件，是不是也有其意思，发布者是一个按钮，而接收者可以是表单，弹层等任何东西。