vue兄弟组件传递数据的实例


Posted in Javascript onSeptember 06, 2018

在main.js里面设置data{eventHub:new Vue() }

new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App },
 data:{
  eventHub:new Vue() // 在main.js设置所有组件都能用调用
 },
  
})

我们再组件一设置一个事件调用组件二的事件,传递数据给组件二

<template>
 <div v-on:click="on()"></div>
 
</template>
<script>
export default {
 data(){
 return{
 datas:"数据"
}
},
 methods:{
 on(){
  this.$root.eventHunb.$emit("eventName",this.datas) 
 
 //$emit是触发事件,当我们点击on事件的时候,$emit会触发其他组件的eventName事件, 把this.datas数据传递到其他组件中
 }
 }
 
}
 
</scrpt>

组件二被触发的事件,接受的参数

<template>
<div>{{datas}}</div>
</template>
<script>
exports default{
data(){
return{
datas:""
}
},
created(){
//组件一跟组件二都要绑定相同的eventName
this.$root.eventHub.$on("eventName",(tar) = > {

this.fn(tar) 
//$on是监听事件,如果组件一得$emit触发了,$on就会触发this.fn事件

})
}
methods:{
fn:function(tar){
this.datas = tar
}
}

}
</script>

以上这篇vue兄弟组件传递数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
js中文逗号转英文实现
Feb 11 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
webpack4简单入门实例
Sep 06 #Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
对vue中v-on绑定自定事件的实例讲解
Sep 06 #Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 #Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 #Javascript
Vue-component全局注册实例
Sep 06 #Javascript
Vue 监听列表item渲染事件方法
Sep 06 #Javascript
You might like
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
javascript 函数调用规则
2009/08/26 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
使用js画图之饼图
2015/01/12 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
PageFactory设计模式基于python实现
2020/04/14 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
学前教育教师求职自荐信
2013/09/22 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
2014年行政工作总结
2014/11/19 职场文书
班级联欢会主持词
2015/07/03 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL