干货-vue 中使用 rxjs 进行非父子组件中传值

2021-01-29 12:17

阅读：487

标签：tle bit service item header blank return 详情 null

一.需求背景:

一般做商城项目都会有公共头部与底部组件,会抽出来在项目的最外层,而其他主体部分会在中,
有时主体部分与公共头部或底部会有数据交互,如商品分类列表的高亮,(点击主体部分,头部组件高亮),此时已不属于父子组件的数据传递,
若将数据放到缓存中由于公共头部或底部一直都不会刷新,拿不到最新的数据,故不能实现,
可以用vux,今天我们来学习用 rxjs 响应式编程库来实现数据传输

二.先将rxjs封装成便于操作的类

安装依赖

npm install rxjs

main.js中引入,并集成

import Vue from ‘vue‘
import {subjectServer} from ‘@/utils/subject.server‘;
Vue.use(subjectServer);

在utils中创建 subject.server.js 封装类

import { Observable, BehaviorSubject } from ‘rxjs‘;

class AjaxNoticeOneService {
  subject = new BehaviorSubject(0);
  pushParams(params) {
    this.subject.next(params);
  }
  clearParams() {
    this.subject.next(0);
  }
  getParams() {
    return this.subject.asObservable();
  }
}

export const subjectServer = {
    install(Vue, options) {
        Vue.prototype.$NotificationOneSub = new 
}

三.在需求页面使用

1.需求:

　　点击首页中的列表1的更多, 跳转到详情页面,且header 上面的列表1 高亮

技术图片

2.分析页面

技术图片

这个页面就是典型的 header + router-view 页面, router-view 中又包含 home + detail 页面

现在需要 home 与 header 之间传递数据

3.使用封装的方法

先在home中的点击事件中添加

this.$NotificationOneSub.pushParams({ key: "moduleActive",value: index})

再在 header 中接收这个方法

注意事项:

　　使用该钩子的页面,在页面销毁时,也需要把该钩子销毁掉,否则每次进来都会获取,会产生重复数据

分享一刻:

　　sjci

　　斯坦福大学推出的 JavaScript 加密库，只有 6KB，API 也很简单，但可以提供最佳的安全性。

干货-vue 中使用 rxjs 进行非父子组件中传值

标签：tle bit service item header blank return 详情 null

原文地址：https://www.cnblogs.com/huangaiya/p/13181974.html

上一篇：discuz3.4 添加用户及发布贴子受影响表记录

下一篇：PHP设计模式之工厂模式

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：干货-vue 中使用 rxjs 进行非父子组件中传值
文章链接：http://soscw.com/index.php/essay/48681.html

亲，登录后才可以留言！

干货-vue 中使用 rxjs 进行非父子组件中传值

评论

热门文章

推荐文章

最新文章

置顶文章