vue兄弟组件传值
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兄弟组件传值的更多相关文章
- 第七十五篇:Vue兄弟组件传值
好家伙, 兄弟组件的传值用到Eventbus组件, 1.EventBus的使用步骤 ① 创建 eventBus.js 模块,并向外共享一个Vue的实例对象 ②在数据发送方, 调用bus.$emit(' ...
- vue兄弟组件传值——事件总线
1.创建一个js文件,例如msg.js,放到合适位置,例如components中,或者其他位置也行.然后在兄弟两个组件中分别引入msg.js文件 msg.js: import Vue from 'vu ...
- vue兄弟组件传值$on多次执行的问题
首先附上如何进行兄弟组件通信的方法链接 https://segmentfault.com/a/1190000011882494 下面是$on多次执行的解决办法 https://blog.csdn.ne ...
- Vue兄弟组件(非父子组件)状态共享与传值
前言:网上大部分文章写的有点乱,很少有讲得易懂的文章. 所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =.= 作者:X1aoYE 备注:此文原创,转载请注明~ 内容里的<br> ...
- vue 父子组件传值,兄弟组件传值
父子组件中的传值 父向子 v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...
- Vue 兄弟组件通信(不使用Vuex)
Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...
- Vue 兄弟组件之间传递数值
Vue 兄弟组件之间传值 创建一个公用文件夹,在文件夹中设置一个事件处理中心,即 然后在需要设置值的组件中引入该事件处理中心 import Hub from '../../common/eventHu ...
- Vue兄弟组件通信
Vue兄弟组件通信之借助中央事件总线 下载链接:https://www.yinxiangit.com 其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——&g ...
- 从vue的组件传值着手浅谈观察者模式
首先,提到观察者模式,这不禁让我想到了MVVM,MVVM架构模式感觉用到了观察者的思想. 我们还是按照惯例,了解一下什么是观察者模式 观察者模式,类似发布订阅模式,完成这个动作首先最少得有两个不同的对 ...
随机推荐
- pip install mysql-connector 安装出错
一.MySQL Connector/Python 2.2.3 的变化: 之前 mysql 官方说MySQL Connector/Python 是纯python语言写的,但是呢! 这个问题在2.2.3中 ...
- Spring mvc注解方式使用事务回滚
项目名:1ma1ma jdbc.xml <bean id="dataSource" class="org.apache.commons.dbcp.BasicDat ...
- Java线程中断理解(interrupte)
Java线程之中,一个线程的生命周期分为:初始.就绪.运行.阻塞以及结束.当然,其中也可以有四种状态,初始.就绪.运行以及结束. 一般而言,可能有三种原因引起阻塞:等待阻塞.同步阻塞以及其他阻塞(睡眠 ...
- 结构体内重载小于号< 及构造函数
struct Node { int d, e; bool operator < (const Node x) const { return x.d < d; } Node(int d, i ...
- js代码中定义后台java中的上下文路径
var href = <c:out value='${sessionScope.contextPath}' />
- shell监控脚本,不考虑多用户情况
#!/bin/bash CheckProcess() { if [ "$1" = "" ]; then fi PROCESS_NUM=`ps -ef | gre ...
- 如何测试是否安装了web服务器
windows默认没有安装web服务器,我们可以安装IIS. 我们安装个tomacte服务器,开发web程序必须的!!如果测试后出现这个页面说明安装成功le ! 我们这个安装的是本地服务器,可以把we ...
- SSIS 自测题-文件操作类
说明:以下是自己的理解答案,不是标准的答案,如有不妥烦请指出. 有些题目暂时没有答案,有知道的请留言,互相学习,一起进步. 1.什么是控制流,什么是数据流,控制流和数据流之间的关系是什 ...
- [工具使用] 如何访问github
1.ping github.com,记录github的ip:192.30.252.129 2.找到系统的 hosts文件位置: C:\Windows\System32\drivers\etc\host ...
- Hadoop源码分析之数据节点的握手,注册,上报数据块和心跳
转自:http://www.it165.net/admin/html/201402/2382.html 在上一篇文章Hadoop源码分析之DataNode的启动与停止中分析了DataNode节点的启动 ...