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事件热键兼容ie|firefox
Dec 30 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
原生js实现购物车功能
2020/09/23 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
django2 快速安装指南分享
2018/01/05 Python
Python之指数与E记法的区别详解
2019/11/21 Python
简单了解Django项目应用创建过程
2020/07/06 Python
python os.rename实例用法详解
2020/12/06 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
新闻专业个人求职信
2013/12/19 职场文书
政府法律服务方案
2014/06/14 职场文书
二人合伙经营协议书
2014/09/13 职场文书
2015年教师节慰问信
2015/03/23 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
小学英语听课心得体会
2016/01/14 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
Python学习之包与模块详解
2022/03/19 Python