vuejs组件交互 - 02 - 事件中心管理组件间的通信
2017-08-09 10:31
441 查看
事件中心
这个可以是一个空的全局的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单一事件管理组件间的通信
- 单一事件中心管理组件通信
- 单一事件中心管理组件通信( vuex )
- Vue2单一事件管理组件通信
- vue30-单一事件管理组件通信: vuex
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- jquery技巧之让任何组件都支持类似DOM的事件管理
- [IMWeb训练营作业]Vuejs的父子组件通信
- vuejs组件交互 - 03 - vuex状态管理实现组件交互
- jQuery技巧之让任何组件都支持类似DOM的事件管理
- 【Android 简单通信组件学习】ContentProvide 唯一与所有app交互的组件
- Vuejs——(10)组件——父子组件通信
- jQuery技巧之让任何组件都支持类似DOM的事件管理
- VueJS-组件通信
- 通过事件通知 实现react.js组件间通信
- Flex学习笔记_05 使用组件处理数据和交互_02导航类组件
- 【Yii】组件和事件行为管理
- 使用Vue开发网站之路2-多组件通信1(利用bus总线进行事件触发)
- android组件间的交互和进程间IPC通信
- Vue2.0组件之间数据交互和通信