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. selenium 实现浏览器 前进和后退

    #coding=utf-8from selenium import webdriver driver = webdriver.Chrome()driver.get("https://www. ...

  2. unity, StartCoroutine and StopCoroutine

    startCoroutine("func",1.0f)可以用stopCoroutine("func")来停. startCoroutine(func(1.0f) ...

  3. CXAnimation类

    #include "XAnimation.h" CXAnimation::CXAnimation(void) { m_strName = ""; m_nFram ...

  4. Spring学习11-Spring使用proxool连接池 管理数据源

    Spring 一.Proxool连接池简介及其配置属性概述   Proxool是一种Java数据库连接池技术.是sourceforge下的一个开源项目,这个项目提供一个健壮.易用的连接池,最为关键的是 ...

  5. js生成二维码的jquery组件–qrcode

    js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...

  6. jQuery 插件分享-非常优秀的tab插件tabulous- 学徒帮

    干货jquery插件分享之tab. tab 选项卡切换,在日常开发中也是一种比较常见的呈现控件,今天这个tab控件效果还是蛮喜欢的,推荐给大家有用到的场景可以试试: tabulous.js A jQu ...

  7. 如何生成项目的chm文档

    如何生成项目的chm文档 2014-11-30 Generate .chm based documentation of your project using SandCastle  tool

  8. 使用ICSharpCode.TextEditor制作一个语法高亮显示的XML编辑器

    使用ICSharpCode.TextEditor制作一个语法高亮显示的XML编辑器 品高工作流 的流程模拟器中使用了一个具有语法高亮和折叠功能的XML编辑器,其核心就是用了SharpDevelop中的 ...

  9. 利用 jQuery 克隆 Object

    在网上搜索关键字 “javascript object clone”,可以找到很多实现克隆 Object 的代码,可是据我测试,让人满意的几乎没有. 今天发现 jQuery 的作者 John Resi ...

  10. [wifi]wifi模块操作

    问题: 应用程序通过什么样的接口去修改wifi的账号和密码 应用程序如何控制wifi模块