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

dubuwucool

2019-06-27

本文首发在个人的博客上，地址：重庆崽儿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使用时你有过这种情况吗？？？？

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>