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 精粹笔记
May 09 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
node中的cookie的具体使用
Sep 13 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
JS性能优化实现方法及优点进行
Aug 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
理解 JavaScript 预解析
2009/10/25 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
Vue.js用法详解
2017/11/13 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
跟老齐学Python之dict()的操作方法
2014/09/24 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Django中的forms组件实例详解
2018/11/08 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
python之随机数函数的实现示例
2020/12/30 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
办公室文员自荐书
2014/02/03 职场文书
消防安全承诺书
2014/05/22 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
首次购房证明
2015/06/19 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby