VUE兄弟组件传值操作实例分析


Posted in Javascript onOctober 26, 2019

本文实例讲述了VUE兄弟组件传值操作。分享给大家供大家参考,具体如下:

1、兄弟之间传递数据需要借助于事件车,通过事件车的方式传递数据

2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。

3、传递数据方,通过一个事件触发bus.$emit(方法名,传递的数据)。

4、接收数据方,通过mounted(){}触发bus.$on(方法名,function(接收数据的参数){用该组件的数据接收传递过来的数据}),此时函数中的this已经发生了改变,可以使用箭头函数。

我们可以创建一个单独的js文件eventVue.js,内容如下

import Vue from 'vue';
export default new Vue();

假如父组件如下:

<template>
<components-a></components-a>
<components-b></components-b>
</template>

子组件a如下:

<template>
<div class="components-a">
<button @click="abtn">A按钮</button>
</div>
</template>
<script>
import eventVue from '../../js/eventVue.js'
export default {
name: 'app',
data () {
return {
'msg':"我是组件A"
}
},
methods:{
abtn:function(){
eventVue.$emit("myFun",this.msg) //$emit这个方法会触发一个事件
}
}
}
</script>

子组件b如下:

<template>
<div class="components-a">
<div>{{btext}}</div>
</div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
name: 'app',
data () {
return {
'btext':"我是B组件内容"
}
},
created:function(){
this.bbtn();
},
methods:{
bbtn:function(){
eventVue.$on("myFun",(message)=>{ //这里最好用箭头函数,不然this指向有问题
this.btext = message
})
}
}
}
</script>

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
layui实现给某一列加点击事件
Oct 26 #Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 #Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 #Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 #Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 #Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 #Javascript
You might like
简单易用的计数器(数据库)
2006/10/09 PHP
一个SQL管理员的web接口
2006/10/09 PHP
PHP Document 代码注释规范
2009/04/13 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php 文件上传类代码
2011/08/06 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
JS实现多功能计算器
2020/10/28 Javascript
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
django+echart数据动态显示的例子
2019/08/12 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
C#笔试题和英文面试题
2013/02/07 面试题
端午节演讲稿
2014/05/23 职场文书
科学发展观活动总结
2014/08/28 职场文书
入股合作协议书
2014/10/12 职场文书
辞职离别感言
2015/08/04 职场文书
学生会干部任命书
2015/09/21 职场文书