vue中除了父子组件传值,父传子用props,子传父用$emit,有时候兄弟组件之间也需要传值

1. 先定义一个中间件,src下面新建self.js

import Vue from 'vue';
let Self = new Vue;
export default Self;

A组件要传值给B组件

要传值的组件A

<template>
<div>
<button @click="gotoB">到B页面的按钮</button>
</div>
</template> <script>
import Self from '@/self'
export default{
methods:{
gotoB(){
Self.$emit('sss',this.checkedOrderList)
this.$router.push({name:'B'})
}
}
} </script>

要接受的组件B

import Self from '@/self'
export default{
data(){
return{
param:''
}
},
created(){
var vm = this;
Self.$on('sss',function(val){
console.log(val);
vm.param = val; // 接收传过来的值
})
}
}

vue兄弟组件传值的更多相关文章

  1. 第七十五篇:Vue兄弟组件传值

    好家伙, 兄弟组件的传值用到Eventbus组件, 1.EventBus的使用步骤 ① 创建 eventBus.js 模块,并向外共享一个Vue的实例对象 ②在数据发送方, 调用bus.$emit(' ...

  2. vue兄弟组件传值——事件总线

    1.创建一个js文件,例如msg.js,放到合适位置,例如components中,或者其他位置也行.然后在兄弟两个组件中分别引入msg.js文件 msg.js: import Vue from 'vu ...

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

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

  4. Vue兄弟组件(非父子组件)状态共享与传值

      前言:网上大部分文章写的有点乱,很少有讲得易懂的文章. 所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =.= 作者:X1aoYE 备注:此文原创,转载请注明~  内容里的<br> ...

  5. vue 父子组件传值,兄弟组件传值

    父子组件中的传值 父向子    v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...

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

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

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

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

  8. Vue兄弟组件通信

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

  9. 从vue的组件传值着手浅谈观察者模式

    首先,提到观察者模式,这不禁让我想到了MVVM,MVVM架构模式感觉用到了观察者的思想. 我们还是按照惯例,了解一下什么是观察者模式 观察者模式,类似发布订阅模式,完成这个动作首先最少得有两个不同的对 ...

随机推荐

  1. mongoDB 简单使用

    mongodb传送门: # 第三方学习地址: http://blog.csdn.net/foruok/article/details/47746057 # 下载mongoDB https://www. ...

  2. java中long型时间戳的计算

    计算时间的时候碰到的问题: Date d = new Date(); long currtime = d.getTime(); //获取当前时间 long starttime = currtime - ...

  3. tracert路由跟踪工具使用方法

    1. 路由跟踪在线Tracert工具说明 Tracert(跟踪路由)是路由跟踪实用程序,用于确定 IP 数据报访问目标所采取的路径.Tracert 命令用 IP 生存时间 (TTL) 字段和 ICMP ...

  4. 危险系数 set容器

    题目描述 抗日战争时期,冀中平原的地道战曾发挥重要作用. 地道的多个站点间有通道连接,形成了庞大的网络.但也有隐患,当敌人发现了某个站点后,其它站点间可能因此会失去联系. 我们来定义一个危险系数DF( ...

  5. Linux SSH登录服务器报ECDSA host key "ip地址" for has changed and you have requested strict checking.错误

    Linux SSH命令用了那么久,第一次遇到这样的错误:ECDSA host key "ip地址" for  has changed and you have requested ...

  6. RFID Hacking–资源大合集

    原文: http://www.freebuf.com/news/others/605.html http://www.proxmark.org/forum/index.php RFID破解神器官方论坛 ...

  7. 纯css3实现的竖形二级导航

    之前为大家分享了好多导航菜单.今天给大家带来一款纯css3实现的竖形二级导航.这款导航菜单可以是无限级.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div styl ...

  8. WiFi(802.11)基础

    参考: 1. Wireshark数据包分析实战(第2版) 2. wifi技术从了解到熟悉1----概念.802.11协议简述及四种主要物理组件.wifi适配层.wap_supplicant和wap_c ...

  9. C语言中对输入输出格式的控制

    格式化输出的控制 #include<stdio.h> int main(void){ float a=111123.681111f; printf("%1.3f",a) ...

  10. dp - HNU 13404 The Imp

    The Imp Problem's Link: http://acm.hnu.cn/online/?action=problem&type=show&id=13404&cour ...