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 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
微信小程序签到功能
Oct 31 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python 正则表达式实现计算器功能
2017/04/29 Python
python Flask实现restful api service
2017/12/04 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
什么是方法的重载
2013/06/24 面试题
公司董事长职责
2013/12/12 职场文书
会计出纳岗位职责
2013/12/25 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
微笑服务演讲稿
2014/05/13 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python