详解vue 组件之间使用eventbus传值

来源:爱站网时间:2020-05-08编辑:网友分享
开发项目使用最多的就是数据,关注最多的也是数据,其实编写代码并不是最大的难题,数据传递让前端人员绞尽脑汁,下面爱站技术频道小编给大家介绍详解vue 组件之间使用eventbus传值,希望能帮到大家。

开发项目使用最多的就是数据,关注最多的也是数据,其实编写代码并不是最大的难题,数据传递让前端人员绞尽脑汁,下面爱站技术频道小编给大家介绍详解vue 组件之间使用eventbus传值,希望能帮到大家。

当然,使用存储也是可以得,但是并非一定要缓存,当然在vue中有推荐了我们去使用vuex去数据交互,Vuex会让你的Vue代码足够灵活可控,把数据统一存入state, 只允许通过Actions触发Mutations修改。然而,有时候我们的项目并没有复杂到需要用上Vuex。,(我们也不讨论已经废除的vm.$dispatch)很多情况下我们都是需要一个事件的捕获,这时候我们就可以用到vue的eventbus了

受用eventbus的方法很是简单,我们需要做三步事情,第一步,我们需要创造一个容器去充当我们的eventbus

第二步,我们需要去抛出,或者说提交我们的事件

第三步,我们去监听我们的那个事件(也许这才是第二部)

首先,我们需要在全局定义我们的eventbus

这里我们定义到了eventbus。这就简单的完成了我们的第一步,当然,全局变量,我想你应该知道定义在哪儿的

接着我们先去抛出这个事件,使用¥。emit去“提交”

怎样,这点都可以理解吧,其次我们经行第三步,去监听

当然。这里已经监听好的。点击事件俺只是个累赘,

接下来我们就要去界面中使用它们了

首先,倒入我们所需要的文件:

这里我使用的是谈transimissionone还有transimissiontwo两个文件‘

接着是定义

其次是使用

最后运行我们的项目,查看下效果

这边主要是交大家使用,所以代码就俘虏在下面,主要是四个文件

transimissionone。vue(发送事件的文件)

其次是transimissiontwo(监听者)

接着是我们的中枢。app。vue中使用

请无视掉没用的代码。接着就是定义eventbus了

window.eventBus = new Vue();

就这样,很是简单,当然,对于级别的可以使用prop,下回再讲

以上就是爱站技术频道小编给大家介绍的详解vue 组件之间使用eventbus传值,如若您想要学习更多专业技术知识,请关注js.aizhan.com吧!

上一篇:js注入 黑客之路必备!

下一篇:浅谈NodeJs之数据库异常处理

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载