vuejs事件中心管理组件间的通信详解_网络技术

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

发布时间 - 2026-01-11 02:42:41 点击率：次

本文为大家分享了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怎么玩

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

# vuejs管理组件 # vuejs事件中心 # vuejs事件中心管理组件 # vuejs父子组件通信的问题 # Vuejs第十篇之vuejs父子组件通信 # Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信 # Vue.js每天必学之组件与组件间的通信 # 深入探讨Vue.js组件和组件通信 # Vue.js子组件向父组件通信的方法实例代码详解 # Vue.js 父子组件通信的十种方式 # Vue.js组件通信的几种姿势 # vue.js父子组件通信动态绑定的实例 # Vue.js组件间通信方式总结【推荐】 # vuejs中父子组件之间通信方法实例详解 # 自己的 # 是一个 # 其他的 # 自定义 # 应在 # 下一篇 # 大家分享 # 具体内容 # 大家多多 # 前应 # 而不是 # class # brush # pre # methods # window # eventHub # js # import # vuex

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：HTML 表单输入字段命名规范：数据库列名直用是否合理？

下一篇：Linux MBR：启动引导程序的基本功能

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：HTML 表单输入字段命名规范：数据库列名直用是否合理？

下一篇：Linux MBR：启动引导程序的基本功能