Vue 兄弟组件之间传值 Bus方法

本文针对两个无关联的组件,A组件触发B组件的方法并传值
注意:A、B是兄弟组件,不是父子组件。

1、在vue项目中新建一个js文件(文件名:bus.js)

// 仅针对两个无关联的兄弟组件使用
import Vue from 'vue'
export default new Vue();

2、在需要传值的A页面引用并开始传参
使用Bus.$emit()来进行传值

使用 Bus.$emit() 第一个参数为传参的名字 第二个参数为传参值

<script>
import Bus from '../plugins/bus'   //路径找到刚刚创建的bus.js
export default {data(){return{value:''}},methods:{sum(){Bus.$emit('summ',this.value)   //用Bus.$emit()来传值}}
}
</script>

3、在B页面获取传参的值
用Bus.$on()来接收参数

用Bus.$on() 第一个参数为接收的参数名 ,第二个为匿名函数,data表示接收的值

<script>
import Bus from '../plugins/bus'   //路径找到刚刚创建的bus.js
export default {data(){return{value:''}},created(){  //在created中使用Bus.$on('summ',(data)=>{   //使用summ的值this.value = data})}}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402950.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql_load

将文本内容导入mysql数据库中导入语句加入字符集&#xff0c;否则乱码 character set gbk;因为name列加了唯一索列&#xff0c;加这个是为避免重复数据插入报错 ignore into table把相同的先删除掉 replace into table[linux] 这里关键load data infile /tmp/t0.txt ignore int…

统一社会信用代码 正则验证

统一社会信用代码C#正则验证 [1-9A-GY]{1}[1239]{1}[1-5]{1}[0-9]{5}[0-9A-Z]{10} 转载于:https://www.cnblogs.com/Qos8/p/5889573.html

微信支付开发(1) JS API支付

From: http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html 关键字&#xff1a;微信支付 微信支付v3 jsapi支付 统一支付 Native支付 prepay_id 作者&#xff1a;方倍工作室 原文: http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html 本文介绍微信支付下的jsapi实现流程…

Find命令使用详解

Find命令使用详解 Find是Linux中查找文件的命令&#xff0c;“find”命令能帮助我们在使用,管理Linux的日常事务中方便的查找出我们需要的文件。Find 命令的特点&#xff1a;实时、精确、支持众多查找标准、遍历指定目录中的所有文件完成查找&#xff0c;速度慢&#xff1b;Fin…

el-upload多文件上传;el-upload采用递归依次上传文件;el-upload采用递归在上一个文件上传成功后再传下一个文件

场景&#xff1a; 需求是接口一次上传一个文件&#xff0c;前一个文件上传成功后再调下一个接口上传下一个文件。 el-upload本身就支持多文件上传。但是它是并发进行&#xff0c;例如&#xff1a;选择一千个文件后&#xff0c;是一千个文件自动立马并行调用一千个后端接口去上传…

昨天事情还是比较多,让我晚上加了会班

今天早上睡的有点沉&#xff0c;然后昨天晚上也是睡的早10&#xff1a;00 转载于:https://www.cnblogs.com/bkchengzheng/p/5891271.html

.Net (C#)委托和事件(获取多个返回值)

From: http://www.xuebuyuan.com/841530.html 在讲如何获取多个返回值之前先来看一个小例子&#xff1a; private void button1_Click(object sender, EventArgs e) { int Number 200; //设置Number的值为 200。 Publishser pub new…

el-dialog点击弹框外区域不关闭弹框;

el-dialog正常点击弹框外区域是关闭弹框&#xff0c;如若不想关闭弹框&#xff0c;设置如下属性即可&#xff1a; :close-on-click-modal"false"

Xen的起源与工作原理

如今&#xff0c;虚拟化市场上满是各种不同的虚拟化解决方案。多年以来&#xff0c;VMware一直控制着基于i386的虚拟化市场。然而&#xff0c;现在的开源解决方案Xen也 在迅速地扩张自己的市场。在本文中&#xff0c;TechTarget中国的特约虚拟化专家Sander van Vugt将介绍什么是…

男女完全匹配算法

#include<iostream> #include<String> #include"Free_W_M_Stack.cpp" using namespace std; int Number1(string elem, string A[], int n){//返回某个人的匹配号for (int i 0; i < n; i){if (elem A[i])return i;}return -1; } int main(){int n;/…

监听el-dialog关闭弹窗事件;el-dialog注册@close关闭事件

场景&#xff1a;在关闭el-dialog弹框时候&#xff0c;做数据清空。只需要给el-dialog注册close关闭事件即可&#xff1a; <el-dialog title"标题" :visible.sync"bind" size"small" closecloseDialog> </el-dialog>//关闭弹框的事件…

手机游戏赚钱到底有多难?接入运营商或需一年

假如你是一个手机游戏创业者&#xff0c;假如你想赚钱&#xff0c;亲&#xff0c;请先与运营商搞好关系&#xff0c;或者&#xff0c;请找一个有SP经验或者熟悉手机游戏审批流程的合作伙伴&#xff0c;否则&#xff0c;等待你的将是甚至长达一年的审批期。 先来讲讲我为何要写这…

总是骗人的你

从这周来&#xff0c;就一直在和周围的人说着要结束实习。到现在&#xff0c;也没有办法办理离职。我现在已经看不起自己了&#xff0c;我已经成为我当初讨厌的人&#xff0c;嘴里一直嚷嚷着&#xff0c;却一直都做不到。还不停的给周围的人说&#xff0c;我想&#xff0c;这种…

Controller向View传值方式总结

From: http://www.cnblogs.com/guohu/p/4377974.html 总结发现ASP.NET MVC中Controller向View传值的方式共有6种&#xff0c;分别是&#xff1a; ViewBagViewDataTempData向普通View页面传一个Model对象向强类型页面传传一个Model对象用一个ViewModel对象解决所有问题 首先我们…

el-table-column动态显示与隐藏

两个不同条件下共用一个el-table表格&#xff0c;并且通过v-if控制某一列的显示与否。 若不生效&#xff0c;则按照如下设置。 ​​​​​​​<el-table-column v-if"undo" label"xxxx" prop"xx" min-width"110" show-overflow-too…

重装系统后,快盘不能拷贝进文件的解决办法

给对应账号的的虚拟磁盘文件&#xff0c;添加"Authenticated Users"账户的权限

记录一次bug解决过程:数据迁移

一 总结不擅长语言表达&#xff0c;勤于沟通&#xff0c;多锻炼 调试MyBatis中SQL语法:foreach 问题&#xff1b;缺少关键字VALUES。很遗憾&#xff1a;它的错误报的让人找不着北。 二 BUG描述&#xff1a;MyBatis中批量插入数据异常 <?xml version"1.0" encodin…

el-tabs标签页浏览器卡死;使用el-tab-pane浏览器卡死;element-ui使用el-tab-pane浏览器卡死,el-tab,el-tab-pane版本不兼容

在项目中使用了el-tabs标签页卡死&#xff0c;一直刷新加载中 出现该问题的原因主要是版本不兼容的问题 首先找到package.json&#xff0c;将以下vue版本修改为2.6.0&#xff0c;element-ui版本修改为2.13.2&#xff1a; “element-ui”: “2.13.2” “vue”: “2.6.0” “vue-…

.net 获取网站根目录的方法

From: http://www.cnblogs.com/wenbo/archive/2011/08/09/2132620.html 获取网站根目录的方法有几种如&#xff1a; Server.MapPath(Request.ServerVariables["PATH_INFO"])    Server.MapPath("/")    Server.MapPath("")//当前代码文件所在…

2013年3月16日星期六

今天第11周&#xff0c;本来是双休&#xff0c;结果要加班&#xff0c;本来要加班写详细设计结果被做画面自适应解决现场问题。本来想回来一个人安静写详细设计&#xff0c;结果却一直在看电影聊天&#xff0c;似乎回来后就不能控制自己了&#xff0c;有点痛苦