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架构模式感觉用到了观察者的思想. 我们还是按照惯例,了解一下什么是观察者模式 观察者模式,类似发布订阅模式,完成这个动作首先最少得有两个不同的对 ...
随机推荐
- JavaScript 中 this 的用法
在 JavaScript 中,this 是动态绑定,或称为运行期绑定的.一般而言,在Javascript中,this 指向函数执行时的当前对象. 由于其运行期绑定的特性,JavaScript 中的 t ...
- Python 数据驱动ddt 使用
准备工作: pip install ddt 知识点: 一,数据驱动和代码驱动: 数据驱动的意思是 根据你提供的数据来测试的 比如 ATP框架 需要excel里面的测试用例 代码驱动是必须得写代码 ...
- php的ord函数——解决中文字符截断问题
php的ord函数——解决中文字符截断问题 分类: PHP2014-11-26 12:11 1033人阅读 评论(0) 收藏 举报 utf8字符截取 函数是这样定义的: int ord ( strin ...
- CentOs下安装gcc/g++/gdb
使用yum安装gcc:yum install gcc即可.使用:which gcc 查看是否安装成功 使用yum安装g++:yum install gcc-c++ 即可.使用:which g++ 查看 ...
- python学习笔记(11)--爬虫下载漫画图片
说明: 1. 某本子网站爬虫,现在只实现了扒取一页,已经凌晨两点了,又饿又困,先睡觉,明天再写总结吧! 2. 我是明天,我来写总结了! 3. 这个网站的结构是这样的: 主页: 主页-第1页-漫画1封面 ...
- mnesia怎样改动表结构
mnesia创建的时候须要指定表record结构,假设定义的record结构改动了,就要更新数据的表结构.否则mnesia无法正常读取和写入数据. 我们最開始是这样定义结构的 -record(pers ...
- PHP 安全三板斧:过滤、验证和转义之转义篇 & Blade模板引擎避免XSS攻击原理探究
PHP 转义 实现 把输出渲染成网页或API响应时,一定要转义输出,这也是一种防护措施,能避免渲染恶意代码,造成XSS攻击,还能防止应用的用户无意中执行恶意代码. 我们可以使用前面提到的 htmlen ...
- HBase源码学习系列
转自:http://www.cnblogs.com/cenyuhai/tag/hbase%E6%BA%90%E7%A0%81%E7%B3%BB%E5%88%97/ (mark) hbase源码系列(十 ...
- windows2003 iis6.0站点打不开,找不到服务器或 DNS 错误【转】
最近服务器经常出现打不开网站的现象,有时出现在上午,有时出现在中午,几乎天天都会出现一次,出现问题时,无论是回收程序池还是重启IIS或者关闭其它一些可能有影响的服务,都不能解决问题.网站打不开时,有如 ...
- 【BZOJ】1052: [HAOI2007]覆盖问题(贪心)
http://www.lydsy.com/JudgeOnline/problem.php?id=1052 首先膜拜题解orz,表示只能想到二分... 贪心就是每一次找到一个最小的能包围所有点的矩阵,然 ...