美文网首页
非父子组件参数传递与通讯方法

非父子组件参数传递与通讯方法

作者: MAYDAY77 | 来源:发表于2019-06-21 15:49 被阅读0次

最近有个需求,header组件中有个待办事项需要显示total条数,在content里面有一个审批组件,审批里审批一条内容成功后,header里的total要减一。

这样,父子组件传值和路由参数传值都不管用了。

突然想起来淘宝客服的标准回答,这边建议亲使用服务通信哦~哈哈哈哈

使用服务Service进行通信,即:两个组件同时注入某个服务

1、首先创建个service

ng g s my-service // 新建服务

2、在total.service.ts中声明一个变量pageTotal

3、在两个组件中分别引入service

import { TotalService }from '../../../../services/total.service';

在constructor中声明一个全局变量totalService,

直接在逻辑处理中更改this.totalService.pageTotal的值就可以了。

又是一个开心的周五,跑步机也到家了,周六早上跑步,然后去国家博物馆看意大利归还的文物展。完美的程序媛生活。

相关文章

  • Vue组件之间的数据传递

    1、父子组件传递父组件传给子组件通过props方法接收参数子组件传给父组件:$emit方法传递参数2、非父子组件创...

  • 非父子组件参数传递与通讯方法

    最近有个需求,header组件中有个待办事项需要显示total条数,在content里面有一个审批组件,审批里审批...

  • react--事件与数据的双向绑定

    事件绑定: 子页面向父页面传递参数的方法: 带参数父子组件通讯

  • vue组件如何通信?有几种方式?

    在vue中组件通讯可以分为父子组件通讯和非父子组件通信。父组件通过props的方式向子组件传递数据,而子组件可以通...

  • Vue非父子组件传递参数

    工具类 event.js 使用方法 例如: 组件A注册 changeTab 事件, 组件B中, 选择了tab...

  • VUE系列之非父子组件之间的通讯

    VUE系列之非父子组件之间的通讯

  • Vue.js 非父子组件之间的通讯

    Vue.js 非父子组件之间的通讯 在一些非父子组件会经常用到互相之间的通讯功能,Vue.js 有 vuex 状态...

  • react组件

    父子组件传值 父→子 父组件通过属性的形式向子组件传递参数子组件通过props接受父组件传递过来的参数注:父组件向...

  • 前端面试必问的

    vue组件通讯的原则 1、父子通讯 props。2、子到父,用自定义事件。非父子组件,就用vuex,就行了

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

网友评论

      本文标题:非父子组件参数传递与通讯方法

      本文链接:https://www.haomeiwen.com/subject/umnyqctx.html