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架构模式感觉用到了观察者的思想. 我们还是按照惯例,了解一下什么是观察者模式 观察者模式,类似发布订阅模式,完成这个动作首先最少得有两个不同的对 ...
随机推荐
- [转]sql:除非另外还指定了 TOP 或 FOR XML,否则,ORDER BY 子句在视图、内联函数、派生表、子查询
执行sql语句: select * from ( select * from tab where ID>20 order by userID desc ) as a order by date ...
- 1. A + B Problem【easy】
Write a function that add two numbers A and B. You should not use + or any arithmetic operators. Not ...
- UIApplication深入学习
多时候,我们不需要关心这个类,我们很少继承这个类,偶尔会调用这个类的api来实现一些功能,但是不可否认,这个类是iOS编程中很重要的一个概念.UIApplication的核心作用是提供了iOS程序运行 ...
- 虚拟机下安装centos7方法,修改系统语言为简体中文的方法
说明 自己装系统时一般都可以自定义选择系统语言.可是云端服务器一般都是安装好的镜像,默认系统语言为英文,对于初学者可能还会有搞不懂的计算机词汇.这里简单说一下centos7怎么修改系统语言为中文. 虚 ...
- c语言中struct的内存对齐
为了让CPU能够更舒服地访问到变量,struct中的各成员变量的存储地址有一套对齐的机制.这个机制概括起来有两点:第一,每个成员变量的首地址,必须是它的类型的对齐值的整数倍,如果不满足,它与前一个成员 ...
- oracle autotrace
--======================= -- 启用 AUTOTRACE功能 --======================= AUTOTRACE是一个SQL*Plus工具,用于跟踪SQL ...
- Cannot proceed with delivery: an existing transporter instance is currently uploading this package
当使用Xcode的Application Loader上传spa到AppStore的过程中,如果临时中断,当你再次进行上传的过程时,就发发现如下现象: Cannot proceed with deli ...
- lua工具库penlight--05日期和时间
创建和显示时间 Date类提过了简洁的使用date和time的方法.它依赖于os.date和os.time. Date对象可以通过table创建,如果os.date,同时提过了获取和设置date 成员 ...
- MDI多文档窗体续
private void 加载窗体_Click(object sender, EventArgs e) { Form2 frm = new Form2();//实例化 Form2 frm.MdiPar ...
- sqlserver、mysql怎样获取连接字符串
sqlserver.mysql怎样获取连接字符串 步骤: 一.新建文本文档xxx.txt,改动文件类型为.udl 二.打开该文件,在<提供数据>中找到相应的服务. 三.在连接中选择须要的数 ...