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

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

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

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

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>

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>

页面效果如图:

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

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>

来看看控制台的效果:

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

从控制台可以看到,当我们从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开发中遇到的一些值得卸载小本本上的问题呗~~~

相关推荐