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变量作用域更轻松
Oct 25 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
vue离开当前页面触发的函数代码
Sep 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
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
mysq GBKl乱码
2006/11/28 PHP
PHP读取目录下所有文件的代码
2008/01/07 PHP
PHP6新特性分析
2016/03/03 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
python做接口测试的必要性
2019/11/20 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Django日志及中间件模块应用案例
2020/09/10 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
优秀的应届生自荐信
2014/05/23 职场文书
教师节慰问信
2015/02/15 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
导游词之永泰公主墓
2019/12/04 职场文书