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 相关文章推荐
禁止拷贝网页内容的js代码
Jan 22 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
JS实现可视化音频效果的实例代码
Jan 16 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 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
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python打印“菱形”星号代码方法
2018/02/05 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
详解Python循环作用域与闭包
2019/03/21 Python
python3.7 的新特性详解
2019/07/25 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
详解python的变量缓存机制
2021/01/24 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
总裁岗位职责
2013/12/04 职场文书
活动倡议书范文
2014/05/13 职场文书
运动会口号16字
2014/06/07 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS