Vue 2.0 事件派发与接收是其核心特性之一,用于组件间的通信。相较于Vue 1.0中移除的`$dispatch`和`$broadcast`方法,Vue 2.0推荐使用更为灵活的事件处理器。Vue 实例实现了事件分发接口,允许我们通过`$emit`、`$on`和`$off`来管理和监听事件。 要创建一个全局事件总线(Event Bus),即一个空的Vue实例,以便在应用的任何地方都能访问并使用它。在初始化Vue应用时,可以在根实例的`data`中定义一个名为`eventHub`的空Vue对象: ```javascript new Vue({ el: '#app', router, render: h => h(App), data: { eventHub: new Vue() } }) ``` 这样,所有组件都可以通过`this.$root.eventHub`来访问这个事件总线。要触发一个事件,可以使用`$emit`方法: ```javascript this.$root.eventHub.$emit('YOUR_EVENT_NAME', yourData) ``` 而在其他组件中接收该事件,可以使用`$on`方法,并在不再需要监听时使用`$off`解除绑定: ```javascript this.$root.eventHub.$on('YOUR_EVENT_NAME', (yourData) => { handle(yourData) }) // 在组件销毁时解除绑定 beforeDestroy() { this.$root.eventHub.$off('YOUR_EVENT_NAME', this.handle) } ``` 然而,当事件触发早于事件绑定时,可能会导致接收不到消息。为解决这个问题,可以使用延迟执行,如`setTimeout`,或者将数据暂存到Vuex这样的状态管理库中,待目标组件加载后再处理。 另外,Vue的原型链(prototype)提供了一种创建全局变量的方法。在Vue实例化之前,可以通过向Vue.prototype添加属性来创建全局可访问的对象: ```javascript Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue() // 添加其他全局变量,如配置文件 Vue.prototype.$config = Vue.prototype.$config || require('path/sysconfig.json') ``` 这样,所有组件都可以直接使用`$eventHub`和`$config`对象。例如,在组件的`mounted`生命周期钩子中: ```javascript mounted() { console.log(this.$config.yourKey) } ``` 此外,如果使用Webpack,还可以通过`DefinePlugin`来定义全局常量,避免直接修改Vue对象: ```javascript new webpack.DefinePlugin({ CONFIG: require('path/sysconfig.json') }) ``` 这样,`CONFIG`对象将在全局范围内可用。这些技术可以帮助开发者在Vue 2.0中有效地进行组件间通信,提高代码的可维护性和复用性。



















- 粉丝: 6
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 市政工程资料表格(完整版).doc
- 医药公司部门职能划分.doc
- 子公司人事管理实施细则.doc
- 医院信息化效益分析.doc
- 西门子PLC课程设计三相六拍步进电动机控制程序的设计与调试.pdf
- 如何提高观察能力和推理能力.docx
- 过程管理手册网络安全及其在校园网中的应用.doc
- 幼儿园音乐课程游戏化探索与研究.doc
- 财务人员个人求职简历.doc
- 机械租赁使用管理制度汇总.doc
- 斯达康杭州研发生产中心段多功能厅大体积混凝土工程施工方案.doc
- 广告宣传费用巧筹划三个方案.doc
- 04.会计凭证.doc
- 行政管理本科社会实践调查报告.doc
- 开题报告答辩基于RS和GIS的宜昌市城市扩张研究.pptx
- 中班幼儿行为习惯养成评价表.doc


