关于Vue 兄弟组件通信
最近项目中遇到希望在操作路由组件里面内容的时候可以影响共用组件Header组件(这个其实就是他的兄弟组件)的操作。
意思就是 router-view指向的router来影响Header组件的信息
首先需要的是在routr-view指向的组件(我这里用的是login组件,接下来就用login来说了) 添加$emit去向父组件传递参数并且触发父组件的自定义事件。

然后在父组件中添加自定义事件

自定义事件就可以去影响兄弟组件的传给它的子组件的props

绑定refurbish(props) 进入Header组件。
在Header中接收props
并且在watch钩子函数中监听props的变化时候你需要的页面逻辑处理。

这次遇到的坑: this.$emit触发父亲传递数据的时候 因为我只是需要一个标示 所以我传入的是Boolen值 =====>
.
那么这会导致除了第一次操作意外。之后的所有操作都不会触发。因为true一直是没有变化的。所以这时候你就需要将boolean类型转化成引用类型
这样每次传入的数据都是有变化的 就会触发事件了。详细可以去了解基本类型和引用类型。
关于Vue 兄弟组件通信的更多相关文章
- Vue 兄弟组件通信(不使用Vuex)
Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...
- Vue兄弟组件通信
Vue兄弟组件通信之借助中央事件总线 下载链接:https://www.yinxiangit.com 其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——&g ...
- vue 组件之间互相传值:兄弟组件通信
vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...
- vue之组件通信
vue组件通信一般分为以下几种情况: 1.父子组件通信: 2.兄弟组件通信: 3.跨多层级组件通信: 一.父子通信 父组件通过props传递数据给子组件,子组件通过emit发送事件传递数 ...
- vue兄弟组件的传值eventbus
注:当在a.vue组件上触发点击事件时,就会触发bus上监听的事件,而bus事件监听在b.vue里面,这个时候就会触发b.vue 上的事件监听,而通过回调函数,就可以拿到a.vue组件传过来的数据,从 ...
- Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- vue兄弟组件传值$on多次执行的问题
首先附上如何进行兄弟组件通信的方法链接 https://segmentfault.com/a/1190000011882494 下面是$on多次执行的解决办法 https://blog.csdn.ne ...
- Vue 兄弟组件之间传递数值
Vue 兄弟组件之间传值 创建一个公用文件夹,在文件夹中设置一个事件处理中心,即 然后在需要设置值的组件中引入该事件处理中心 import Hub from '../../common/eventHu ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- [转]让你的网页文本框增加光晕效果与提示,水印(类似QQ2011)
本文转自:http://www.cnblogs.com/xiaofengfeng/archive/2013/01/28/2880344.html 让你的网页文本框增加光晕效果(类似QQ2011) 我们 ...
- 使用codedom自动生成代码
刚刚接触自动代码生成,便小试牛刀,解决了项目中的一些问题. 问题:我们的项目分成很多层次,当增加一个方法的时候,会显得异常繁琐,但每个层次之间的调用大同小异,所以尝试使用代码生成.现在假设有Engin ...
- mysql连接查看
1:查看当前连接 mysql> show status like 'Threads%'; +-------------------+-------+ | Variable_name | ...
- HDU 5384——Danganronpa——————【AC自动机】
Danganronpa Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Tot ...
- stl::iterator汇总
STL——iterator 一.概述Iterator(迭代器)模式又称Cursor(游标)模式, 根据STL中的分类,iterator包括:Input Iterator:只能单步向前迭代元素,不允许修 ...
- intellijidea课程 intellijidea神器使用技巧 4-2 抽取
1 抽取变量 Ctrl alt V 抽取变量 Ctrl alt C 抽取静态变量 顺带创建静态方法 Crrl alt F 抽取成员变量 2 抽取方法参数 Ctrl alt P 抽取参数,到方法体中 ...
- Azure进阶攻略 | 下载还是在浏览器直接打开,MIME说了算!
多年来,从一开始的网络菜鸟发展成 Azure 云专家,想必你一定学到了很多知识.不知道在这个过程中你自己是否遇到过,或者被人问到过类似下面这样的问题: 同样是直接点击网页上提供的 .mp4 视频文件链 ...
- Hadoop federation配置
Hadoop federation配置 1.介绍 hadoop federation也称为联邦,主要是对namenode进行扩容.HA模式下只是实现了hadoop namenode的高可用,但是随着文 ...
- html中如何使用python屏蔽一些基本功能
进行数据解析的理由不计其数,相关的工具和技巧也同样如此.但是,当您需要用这些数据做一些新的事情时,即使有“合适的”工具可能也是不够的.这一担心对于异类数据源的集成同样存在.用来做这项工作的合适工具迟早 ...
- mysql 5.6 zip安装,启动失败,1067错误
在使用mysql5.6 zip压缩包安装mysql过程中,启动过程,老是卡在1067启动错误上,翻看网上各种解决方案,卸载干净重装,重启,都不管用. 网上各种教程都是新建 my.ini mysql 配 ...