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 相关文章推荐
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
JavaScript监听触摸事件代码实例
Dec 30 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
起诉状范本
2015/05/20 职场文书
2015年国庆节寄语
2015/08/17 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js