vuejs事件中心管理组件间的通信详解

 更新时间:2017年08月09日 10:40:57   作者:CooMark  
这篇文章主要为大家详细介绍了vuejs事件中心管理组件间的通信,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文为大家分享了vuejs事件中心管理组件间的通信,供大家参考,具体内容如下

事件中心

这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法。

import Vue from 'Vue'
window.eventHub = new Vue();

事件监听和注销监听

事件监听应在更组件的created钩子函数中进行,在组件销毁前应注销事件监听

 //hook 
 created: function () {
 //listen event
 window.eventHub.$on('switchComments',this.switchComments);
 window.eventHub.$on('removeIssue',this.removeIssue);
 window.eventHub.$on('saveComment',this.saveComment);
 window.eventHub.$on('removeComment',this.removeComment);

 //get init data
 var that =this;
 axios.get('issue/index')
 .then(function (resp) {
  that.issue_list=resp.data;
 });
 },
 beforeDestroy: function () {
 window.eventHub.$off('switchComments');
 window.eventHub.$off('removeIssue');
 window.eventHub.$off('saveComment');
 window.eventHub.$off('removeComment');
 }

子组件的emit事件,注意这里用的window.$emit而不是this.emit

 methods: {
 removeComment: function(index,cindex) {
  window.eventHub.$emit('removeComment', {index:index, cindex:cindex});
 },
 saveComment: function(index) {
  window.eventHub.$emit('saveComment', {index: index, comment: this.comment});
  this.comment="";
 }
 },

Note: 这其实还不是最理想的通信方式,下一篇我们看看vuex怎么玩

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

相关文章

  • Ant Design Vue Table组件合并单元格方式

    Ant Design Vue Table组件合并单元格方式

    这篇文章主要介绍了Ant Design Vue Table组件合并单元格方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue 内联样式style中的background用法说明

    vue 内联样式style中的background用法说明

    这篇文章主要介绍了vue 内联样式style中的background用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 利用纯Vue.js构建Bootstrap组件

    利用纯Vue.js构建Bootstrap组件

    这篇文章主要介绍了如何使用 Vue.js 和纯 JavaScript 构建 Bootstrap 组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 解决vue2 在mounted函数无法获取prop中的变量问题

    解决vue2 在mounted函数无法获取prop中的变量问题

    这篇文章主要介绍了vue2 在mounted函数无法获取prop中的变量的解决方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue.js云存储实现图片上传功能

    vue.js云存储实现图片上传功能

    示对象存储是腾讯云提供的一种存储海量文件的分布式存储服务,本文主要介绍了用vue.js实现图片上传功能,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vue3新属性之css中使用v-bind的方法(v-bind in css)

    Vue3新属性之css中使用v-bind的方法(v-bind in css)

    这篇文章主要介绍了Vue3新属性css中使用v-bind(v-bind in css)的方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • Vue实现父子组件传值其实不难

    Vue实现父子组件传值其实不难

    这篇文章主要介绍了Vue实现父子组件传值其实不难问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • VUE使用DXFParser组件解析dxf文件生成图片的操作代码

    VUE使用DXFParser组件解析dxf文件生成图片的操作代码

    这篇文章主要介绍了VUE使用DXFParser组件解析dxf文件生成图片的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue2结合echarts实现一个地图的效果

    vue2结合echarts实现一个地图的效果

    这篇文章主要介绍了vue2结合echarts实现一个地图的效果,本文通过实例代码给大家介绍的非常详细,对大家何用vue和echarts实现一个地图有一定的帮助,感兴趣的朋友一起看看吧
    2024-03-03
  • Vue解析带html标签的字符串为dom的实例

    Vue解析带html标签的字符串为dom的实例

    今天小编就为大家分享一篇Vue解析带html标签的字符串为dom的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论