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架构模式感觉用到了观察者的思想. 我们还是按照惯例,了解一下什么是观察者模式 观察者模式,类似发布订阅模式,完成这个动作首先最少得有两个不同的对 ...
随机推荐
- mysql常见数据提示 mysql报错提示大全
错误代码和消息 目录 B.1. 服务器错误代码和消息 B.2. 客户端错误代码和消息 本章列出了当你用任何主机语言调用MySQL时可能出现的错误.首先列出了服务器错误消息.其次列出了客户端程序消息. ...
- try、finally代码块有无return时的执行顺序
结论: 1.不管有没有出现异常,finally块中代码都会执行:2.当try和catch中有return时,finally仍然会执行:3.finally是在return后面的表达式运算后执行的(此时并 ...
- JUC组件扩展(三):BlockingQueue(阻塞队列)详解
一. 前言 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大 ...
- C语言的存储类型和关键字extern、static
1.C语言中每个变量都有3个性质:存储期限.作用域.链接 1)存储期限:变量的存储期限决定了为变量预留的内存被释放的时间.共2种,自动存储期限(auto),静态存储期限(static),自动存储(au ...
- jquery获取tr并更改tr内容
jquery获取tr并更改tr内容示例代码. 例子: $(document).ready(function() { $("#Email tr").each(function(){ ...
- Struts2初学 Struts2在Action获取内置对象request,session,application(即ServletContext)
truts2在Action中如何访问request,session,application(即ServletContext)对象???? 方式一:与Servlet API解耦的方式 可以使用 ...
- Nginx 0.8.x + PHP 5.2.13(FastCGI)搭建胜过Apache十倍的Web服务器(第6版)[原创]
mkdir -p /data0/software cd /data0/software wget http://sysoev.ru/nginx/nginx-0.8.46.tar.gz wget htt ...
- vue2 vue-router2 webpack1
转自:http://www.qinshenxue.com/article/20161106163608.html: 项目地址:https://github.com/qinshenxue/vue2-vu ...
- forward declaration of class 错误
在使用Qt的时候遇到这个错误,查了一下发现,是因为我没有正确的使用前置声明. #ifndef FIRSTPAGE_H #define FIRSTPAGE_H #include "ui_dia ...
- oracle 表空间 数据文件 表的关系
数据文件是表空间的容器,增加数据文件是增大表空间的容量,而不是往表空间里添加数据因此数据文件肯定能添加,如果表空间用完了,再添加新的数据就会报错你可以这样理解,数据库是一个箱子,表空间是箱子里的抽屉, ...