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

2018-04-15 admin

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

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

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

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

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

  1. HomePage:
<template>
  <div>
      <div>
        <router-link to="/">首页</router-link>
        <router-link to="/second">secondPage</router-link>
        <div style="margin-top: 30px;">
          this HomePage {{msg}}
        </div>
      </div>
  </div>
</template>

<script>
    export default {
    name: 'HomePage',
    data () {
      return {
        msg: 'Home'
      }
    }
}
</script>
  1. SecondPage:
<template>
    <div>
      <router-link to="/" >首页</router-link>
      <router-link to="/second">secondPage</router-link>
      <button @click="toHome()">点击事件</button>
      <div style="margin-top: 30px;">this secondPage</div>
    </div>
</template>

<script>
  export default {
    name: 'SecondPage',
    data() {
        return {}
    },
    methods: {
      toHome() {
        history.back();
      }
    }
  }
</script>

页面效果如图:

Second、开始使用EventBus

根据官方文档( 官方文档地址 ),先在main.js文件中声明一个全局的空的Vue实例:

window.Bus = new Vue();

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

最开始我的写法如下:

HomePage部分代码
// HomePage

<script>
    export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Home'
      }
    },
    methods: {
        fn() {
            Bus.$on("postData",data=> {
                console.log(data)
                //console.log(this.msg)
                this.msg = data;
              })
        }
    },
    mounted() {
        this.fn();
    }
}
</script>
SecondPage部分代码
<script>
  export default {
    name: 'SecendPage',
    data() {
        return {}
    },
    methods: {
      toHome() {
        Bus.$emit("postData","hello00");
        history.back();
      }
    }
  }
</script>

来看看控制台的效果:

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

最后,通过群里大佬给的资料(资料再此!!!!),终于实现了想要的效果

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

在路由切换时,执行的方法依次是:

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

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

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

HomePage部分代码
// HomePage

<script>
    export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Home'
      }
    },
    created(){
        Bus.$on("postData",data=> {
            this.msg = data;
          })
    }
}
</script>
SecondPage部分代码
<script>
  export default {
    name: 'SecendPage',
    data() {
        return {}
    },
    methods: {
      toHome() {
        history.back();
      }
    },
    destroyed(){
        Bus.$emit("postData","hello00");
    }
  }
</script>

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

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

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
何为闭包?有关JS闭包的一些理解
简单一点的说:闭包就是能够读取其他函数内部变量的函数。那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那如果将内部函数返回是不是代表能够通过它访问其父函数中的变量了呢,闭包的原理事实上就...
2015-11-11
回到顶部