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 相关文章推荐
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
js操作数组函数实例小结
Dec 10 Javascript
React组件生命周期详解
Jul 03 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
原生js调用json方法总结
Feb 22 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
js实现的订阅发布者模式简单示例
Mar 14 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
php中上传文件的的解决方案
2018/09/25 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
PHP递归的三种常用方式
2019/02/28 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python中的random()方法的使用介绍
2015/05/15 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
个人函授自我鉴定
2014/03/25 职场文书
股东合作协议书
2014/09/12 职场文书
2015年党员承诺书
2015/01/21 职场文书
python中的sys模块和os模块
2022/03/20 Python