收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

vue2.0s中eventBus实现兄弟组件通信的示例代码

vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现。然而在vue2.0中,已经废除了这种用法。

vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择。

然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说,就需要一个比较便捷的解决方法。那么,eventBus的作用就体现出来了。

主要是现实途径是在要相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

这里来看一个简单的例子:

比如,我们这里有三个组件,main.vue、click.vue、show.vue。click和show是父组件main下的兄弟组件,而且click是通过v-for在父组件中遍历在了多个列表项中。这里要实现,click组件中触发点击事件后,由show组件将点击的是哪个dom元素console出来。

首先,我们给click组件添加点击事件

<div class="click" @click.stop.prevent="doClick($event)"></div> 

想要在doClick()方法中,实现对show组件的通信,我们需要新建一个js文件,来创建出我们的eventBus,我们把它命名为bus.js

import Vue from 'vue'; 
export default new Vue(); 

这样我们就创建了一个新的vue实例。接下来我们在click组件和show组件中import它。

import Bus from 'common/js/bus.js'; 

接下来,我们在doClick方法中,来触发一个事件:

methods: { 
  addCart(event) { 
  Bus.$emit('getTarget', event.target);  
  } 
} 

这里我们在click组件中每次点击,都会在bus中触发这个名为'getTarget'的事件,并将点击事件的event.target顺着事件传递出去。

接着,我们要在show组件中的created()钩子中调用bus监听这个事件,并接收参数:

created() { 
    Bus.$on('getTarget', target => { 
      console.log(target); 
    }); 
   } 

这样,在每次click组件的点击事件中,就会把event.target传递到show中,并console出来。

所以eventBus的使用还是非常便捷的,但是如果是中大型项目,通信比较复杂,还是建议大家直接使用vuex。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持积木网。

详解vue 组件之间使用eventbus传值
对于前端的我们而言,并非是只有写界面才是最大的问题,很多的情况下,我们需要关注的是数据,比如js页面的数据传递等等,学习vue我们也是需要知

Angular4实现鼠标悬停3d倾斜效果
Angular是什么Angular是由谷歌开发与维护一个开发跨平台应用程序的框架,同时适用于手机与桌面。Angular有什么特点基于Angular我们可以构建适用于所有平

AngularJS实现的select二级联动下拉菜单功能示例
本文实例讲述了AngularJS实现的select二级联动下拉菜单功能。分享给大家供大家参考,具体如下:!DOCTYPEhtmlhtmlng-appheadlang="en"metacharset="UTF-8"title/title/headscri

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号