vue 使用eventBus实现同级组件的通讯


Posted in Javascript onMarch 02, 2018

新创建一个vue实例用于调度事件的绑定和发送

可以做到同级组件相互通讯,传递参数,点击第一个组件会修改第二个组件的label值,点击第二个组件会修改第二个组件的label值

vue 使用eventBus实现同级组件的通讯

vue 使用eventBus实现同级组件的通讯

vue 使用eventBus实现同级组件的通讯

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="vue.js"></script>
</head>
<body>
<div id="app">
 <one></one>
 <two></two>
</div>
</body>
<script>
 // 使用一个vue实例 作为事件的载体,用于绑定事件和处理发送事件,作为调度中心
 let eventBus = new Vue()
 let one = {
  template: '<div>{{val}} <button @click="click">click</button></div>',
  data() {
   return {
    val: 0
   }
  },
  created() {
   //为one绑定事件,如果two_click事件发生了,则执行回调函数
   eventBus.$on('two_click',
    (val) => {
     // 这个this 指的是one的vue实例
     this.val = val
    }
   )
  },
  methods: {
   click() {
    // 如果one被点击了,则发送一个one_click的事件,并传递一个参数
    eventBus.$emit('one_click', 11)
   }
  }
 }
 let two = {
  template: '<div>{{val}} <button @click="click">click</button></div>',
  data() {
   return {
    val: 0
   }
  },
  created() {
   eventBus.$on('one_click',
    (val) => {
     this.val = val
    })
  },
  methods: {
   click() {
    eventBus.$emit('two_click', 22)
   }
  }
 }
 new Vue({
  el: '#app',
  components: {
   one,
   two
  }
 })
</script>
</html>

总结

以上所述是小编给大家介绍的vue 使用eventBus实现同级组件的通讯,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 #Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 #Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 #Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 #Javascript
浅谈FastClick 填坑及源码解析
Mar 02 #Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 #Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 #Javascript
You might like
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php关联数组快速排序的方法
2015/04/17 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
原生js实现随机点餐效果
2019/12/10 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python实现k-means算法
2018/02/23 Python
解决python报错MemoryError的问题
2018/06/26 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
大学毕业感言50字
2014/02/07 职场文书
安全生产月宣传标语
2014/10/06 职场文书
党员年度个人总结
2015/02/14 职场文书
老人与海读书笔记
2015/06/26 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
php访问对象中的成员的实例方法
2021/11/17 PHP