关于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:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- [转]Javascript的匿名函数
本文转自:http://dancewithnet.com/2008/05/07/javascript-anonymous-function/ 一.什么是匿名函数? 在Javascript定义一个函数一 ...
- linux上的常用命令
删除目录及文件 (删除tem目录和所有.xml文件) rm -rf tem/ *.xml 复制文件 cp zoo_sample.cfg zoo.cfg 两台机的目录相互拷贝 scp -r apps/ ...
- Kudu的Using Apache Kudu with Apache Impala(官网推荐的步骤)
不多说,直接上干货! http://kudu.apache.org/docs/kudu_impala_integration.html http://blog.csdn.net/lovebyz/art ...
- linux 防止ssh暴力破解密码
收集 /var/log/secure 里面的信息,若是某个IP 链接次数超过一定次数 ,则把此ip记录到/etc/hosts.deny里面 #!/bin/bash #Denyhosts SHELL S ...
- PHP中的header()函数
PHP header 函数的用法及其注意事项 void header ( string $string [, bool $replace = true [, int $http_response_co ...
- Spring Boot集成Reactor事件处理框架的简单示例
1. Reactor简介 Reactor 是 Spring 社区发布的基于事件驱动的异步框架,不仅解耦了程序之间的强调用关系,而且有效提升了系统的多线程并发处理能力. 2. Spring Boot集成 ...
- asp.net webForm也可以这样用Ajax -- My Ajax Framework [全屏看文]
对于asp.net WebForm项目,进行Ajax操作大概有三种方式:web服务(.asmx文件) , 一般处理程序(.ashx)和 一些Ajax控件. 对于.net提供的ajax控件,暂且不 ...
- iOS 状态栏设置为白色
1.首先需要再info.plist中添加一项View controller-based status bar appearance为no 2.在需要的地方添加代码 [[UIApplication sh ...
- 【起航计划 023】2015 起航计划 Android APIDemo的魔鬼步伐 22 App->Menu->Inflate from XML 使用xml资源展示菜单
本例MenuInflateFromXml.java演示了如何从Menu 资源(XML 定义)展开菜单项.这个例子的onCreate 采用了使用代码来创建Activity 界面的方法 而通常的方法是采用 ...
- Quick-Cocos2d-x Lua脚本加密打包器
准备开新项目了,在寻找合适的框架,后来就发现了Quick-Cocos2d-x这玩意. 别说,还挺好使.之后一步步研究,发现Lua不加密是不行的. 加密的方法在这里. 因为在做版本更新的时候,一般大家都 ...