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 相关文章推荐
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
validform表单验证的实现方法
Mar 08 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
Angular 多模块项目构建过程
Feb 13 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php array_merge下进行数组合并的代码
2008/07/22 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python中几个比较常见的名词解释
2015/07/04 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
大学生学习自我评价
2014/01/13 职场文书
公开服务承诺制度
2014/03/26 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
表扬通报怎么写
2015/01/16 职场文书
Vue监视数据的原理详解
2022/02/24 Vue.js