Vue中的EventBus使用时你有过这种情况吗？？？？

yeyan1996 发布于2019-08-22 16:19 / 1635人阅读

摘要：但是，不要高兴的太早。。。。。，看看页面上并不是显示的我们传过来的值。。。现将两个页面的部分代码做如下修改部分代码部分代码不知道你们了解这个的使用姿势了吗反正作为菜鸟的我是又学到了，欢迎留言说说你们在开发中遇到的一些值得卸载小本本上的问题呗

本文首发在个人的博客上，地址：重庆崽儿Brand，欢迎访问~~~~

最近做公司项目遇到这样一个需求：

从一个页面跳转到另一个页面去选择一些信息，选择好后返回上一个页面，并把选择的信息带过来

由于之前一直在工作中用的mui这个前端框架，框架自己封装有实现这个需求的方法，所以实现就很简单，但是现在公司项目用的是Vue，首先想到的方法可能就是用localstorage或者Vuex来实现了，由于项目比较小，几乎不会用到Vuex，如果只是这里用到的话，感觉Vuex不是特别合适，于是就pass掉了。localstorage又感觉逼格不够高，于是也pass掉了，在群里和网上一番咨询，于是准备使用Vue官方也有推荐的一个非父子组件通信的方法：eventBus

First、先准备这样两个页面：

HomePage:

SecondPage:

页面效果如图：

Second、开始使用EventBus

根据官方文档（ 官方文档地址 ），先在main.js文件中声明一个全局的空的Vue实例：

window.Bus = new Vue();

然后修改HomePage和SecondPage两个页面的代码，

最开始我的写法如下：

HomePage部分代码

// HomePage

SecondPage部分代码

来看看控制台的效果：

从控制台可以看到，当我们从SecondPage返回到HomePage的时候控制台已经打印出我们从SecondPage传过来的值了。但是！！！！，不要高兴的太早。。。。。，看看页面上！！！并不是显示的我们传过来的值。。。而是初始值，这是什么情况！！！？？？？

最后，通过群里大佬给的资料（资料再此！！！！），终于实现了想要的效果

资料中说：因为vue-router在切换时，先加载新的组件，等新的组件渲染好但是还没挂在前，销毁旧的组件，然后再挂载组件

在路由切换时，执行的方法依次是：

新組件： beforeCreate
新組件： created
新組件： beforeMount
旧組件： beforeDestroy
旧組件： destroy
新組件： mounted

所以，新组件只要在旧组件beforeDestroy之前，$on事件就能成功接收到。

现将两个页面的部分代码做如下修改：

HomePage部分代码

// HomePage

SecondPage部分代码

不知道你们了解这个EventBus的使用姿势了吗？反正作为Vue菜鸟的我是又学到了，

欢迎留言说说你们在vue开发中遇到的一些值得卸载小本本上的问题呗~~~

云服务器 GPU云服务器使用情况统计内存使用情况 webrtc使用情况 ecs内存使用情况

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94237.html

vue 248+个知识点（面试题）为你保驾护航

摘要：要招一个会的开发者作为面试官的你，你还会每次都只是问这些老土的问题吗你对的理解是什么你知道什么是双向绑定吗你了解它的原理吗说说的生命周期有哪些组件通讯有哪些你用过吗作为面试者的你，在网上搜索下面试题及答案，看完后你是不是觉得自己掌握了武林秘 showImg(https://segmentfault.com/img/bVburrG?w=533&h=300); 要招一个会vue的开发者： ...

snowell 2019-08-23 18:22 评论0 收藏0
vue中8种组件通信方式, 值得收藏!

摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...

BicycleWarrior 2019-08-26 10:44 评论0 收藏0
vue非父子组件通信中eventbus被多次触发（vue中使用eventbus踩过的坑）

摘要：主要是看这是从上个页面传来的数据这一行数据的输出次数情况来判断事件触发次数。总结所以，如果想要用来进行页面组件之间的数据传递，需要注意亮点，组件事件应在生命周期内。其次，组件内的记得要销毁。转载于简书原文链接：https://www.jianshu.com/p/fde...一开始的需求是这样子的，我为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页...

CHENGKANG 2019-08-22 16:29 评论0 收藏0
「Vue实践」武装你的前端项目

摘要：所有的高阶抽象组件是通过定义选项来声明的。所以一般在生命周期或者中，需要用实例的方法清除可当你有多个时，就需要重复性劳动销毁这件事儿。更多的配置请看双端开启开启压缩的好处是什么可以减小文件体积，传输速度更快。本文目录接口模块处理 Vue组件动态注册页面性能调试：Hiper Vue高阶组件封装性能优化：eventBus封装 webpack插件：真香本文项目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 评论0 收藏0