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 相关文章推荐
JavaScript中的this实例分析
Apr 28 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
js 函数的副作用分析
Aug 23 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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
php5.3 注意事项说明
2013/07/01 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python中decorator使用实例
2015/04/14 Python
python中的常量和变量代码详解
2018/07/25 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python 实现敏感词过滤的方法
2019/01/21 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python字符串格式化方式解析
2019/10/19 Python
opencv python如何实现图像二值化
2020/02/03 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
人力资源管理专业自荐信
2014/06/24 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python