最近项目中遇到希望在操作路由组件里面内容的时候可以影响共用组件Header组件(这个其实就是他的兄弟组件)的操作。

 意思就是 router-view指向的router来影响Header组件的信息

首先需要的是在routr-view指向的组件(我这里用的是login组件,接下来就用login来说了)   添加$emit去向父组件传递参数并且触发父组件的自定义事件。

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

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

绑定refurbish(props) 进入Header组件。

 在Header中接收props

并且在watch钩子函数中监听props的变化时候你需要的页面逻辑处理。

这次遇到的坑: this.$emit触发父亲传递数据的时候 因为我只是需要一个标示 所以我传入的是Boolen值 =====> .

那么这会导致除了第一次操作意外。之后的所有操作都不会触发。因为true一直是没有变化的。所以这时候你就需要将boolean类型转化成引用类型 这样每次传入的数据都是有变化的 就会触发事件了。详细可以去了解基本类型和引用类型。

关于Vue 兄弟组件通信的更多相关文章

  1. Vue 兄弟组件通信(不使用Vuex)

    Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...

  2. Vue兄弟组件通信

    Vue兄弟组件通信之借助中央事件总线 下载链接:https://www.yinxiangit.com 其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——&g ...

  3. vue 组件之间互相传值:兄弟组件通信

    vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...

  4. vue之组件通信

    vue组件通信一般分为以下几种情况: 1.父子组件通信: 2.兄弟组件通信: 3.跨多层级组件通信: 一.父子通信        父组件通过props传递数据给子组件,子组件通过emit发送事件传递数 ...

  5. vue兄弟组件的传值eventbus

    注:当在a.vue组件上触发点击事件时,就会触发bus上监听的事件,而bus事件监听在b.vue里面,这个时候就会触发b.vue 上的事件监听,而通过回调函数,就可以拿到a.vue组件传过来的数据,从 ...

  6. Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  7. vue兄弟组件传值$on多次执行的问题

    首先附上如何进行兄弟组件通信的方法链接 https://segmentfault.com/a/1190000011882494 下面是$on多次执行的解决办法 https://blog.csdn.ne ...

  8. Vue 兄弟组件之间传递数值

    Vue 兄弟组件之间传值 创建一个公用文件夹,在文件夹中设置一个事件处理中心,即 然后在需要设置值的组件中引入该事件处理中心 import Hub from '../../common/eventHu ...

  9. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

随机推荐

  1. 利用nginx的fastcgi_cache模块来做缓存

    nginx不仅有个大家很熟悉的缓存代理后端内容的proxy_cache,还有个被很多人忽视的fastcgi_cache. proxy_cache的作用是缓存后端服务器的内容,可能是任何内容,包括静态的 ...

  2. pat1019. General Palindromic Number (20)

    1019. General Palindromic Number (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN ...

  3. 记一次失败的Linux安装

    这次把整个电脑都装了Ubuntu,向Linux这条路越走越远了,也感谢社会对Linux的支持越来越完善了,才让我下定这个决心,再次表示感谢 之前都是装双系统或者在vm下安装的Linux,现在再装一次, ...

  4. Socket网络通信之NIO

    Socket网络通信之NIO NIO:new io ,java1.4开始推出的可非阻塞IO. java.nio 包,可解决BIO阻塞的不足 但比BIO学习.使用复杂. 可以以阻塞.非阻塞两种方式工作. ...

  5. 设计模式之工厂模式详细读后感TT!(五)

    一如既往:原文 工厂方法(factory method)模式的意义是定义一个创建产品对象的工厂接口, 将实际创建工作推迟到子类当中. 核心工厂的创建, 这样核心类成为一个抽象工厂角色, 仅仅复制工厂子 ...

  6. iview 中 select 值不对

    <Select v-model="formValidate.departmentId" @on-change="selectDepartment"> ...

  7. Jquery插件之ajaxForm简介

    我们平常在使用jQuery异步提交表单的时候,一般都是加载在submit事件中,如下所示: $(document).ready(function(){ $('#myForm').submit(func ...

  8. Vim 新手节省时间的小技巧

    1. 不关闭终端退出编辑器 使用 Vim 编辑器保存并退出编辑状态是一件轻而易举的事,你只需记住按 ESC 键切换到正常模式,然后输入冒号(:),之后输入 wq 即可实现保存并退出. :wq 如果不想 ...

  9. StackTrack for debug

    System.Diagnostics.Debug.WriteLine("Serial port. {0},{1}", this.GetType().FullName, new Sy ...

  10. Struts2_Global_Results_全局结果集

    struts.xml文件配置 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts ...