详解Vue2.0事件派发与接收

　　

由于vue2.0移除了1.0中调度和美元的广播这两个组件之间通信传递数据的方法,官方的给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了一个空的vue实例就可以做到,因为vue实例实现了一个事件分发接口。

　　

请直接看代码,在初始化web应用程序的时候,给数据添加一个名字为eventhub的空vue对象

　　 　　 　　新Vue ({ 　　埃尔:“#应用”, 　　路由器, 　　呈现:h=比;h(应用程序), 　　数据:{ 　　eventHub:新Vue () 　　} 　　}) 　　 　　

好的这个时候你就可以一劳永逸了,在任何组件都可以调用事件发射接受的方法了。

　　

如何获取到这个空的vue对象eventhub呢。在组件里面直接调用这个

　　

某一个组件内调用事件触发

　　 　　//通过。美元root.eventHub获取此对象//调用美元发出方法 　　root.eventHub美元。释放美元(YOUR_EVENT_NAME, yourData) 　　 　　

另一个组件内调用事件接受,当然在组件销毁时接触绑定,使用了美元方法

　　 　　 　　root.eventHub美元。美元(“YOUR_EVENT_NAME”(yourData)=祝辞{ 　　处理(yourData) 　　}) 　　 　　

遇到一个问题,考虑特定场景:

　　

跳转路由之前我们调用了美元发出方法,这个方法在一组件里面处理数据,但是一组件绑在美元定事件之美元前发出事件已经发射,所以这会导致一直接受不到消息,看来这个事件绑定有时效性问题,你可以setTimeout来做一下延时,但是这个特别奇怪,那就把数据存到商店然后等一组件加载完了再去取....

　　

官方文档请点击我
　　

　　

记录> 　　Vue.prototype。eventHub=Vue.prototype美元。美元eventHub | |新Vue () 　　 　　

当然我们可以定义其他的全局变量比。如当前应用的系统配置文件,名字为sysconfig。json,你可以这样定义
　　

　　 　　 　　Vue.prototype。配置=Vue.prototype。美元配置| |要求(路径/sysconfig.json) 　　 　　

这样我们在组件内部就可以直接调用eventHub美元和美元配置对象了。
　　

　　

比如在安装函数里面直接console.log (config.yourKey美元)

　　

记录> 　　新webpack.DefinePlugin ({ 　　配置:需要(“路径/sysconfig.json”) 　　}); 　　之前 　　 　　

然后我们也可以在全局内使用配置对象了。

　　

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

详解Vue2.0事件派发与接收