Vue中的eventBus初尝试

发表于 阅读次数：

从一个页面跳转到另一个页面去选择一些信息，选择好后返回上一个页面，并把选择的信息带过来。由于之前一直在工作中用的mui这个前端框架，框架自己封装有实现这个需求的方法，所以实现就很简单，但是现在公司项目用的是Vue，打算用eventBus来实现

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

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

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

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

  1. HomePage:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <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>
  2. SecondPage:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <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>
    页面效果如图：

HomePage
SecondPage

Second、开始使用EventBus

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

1
window.Bus = new Vue();

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

最开始我的写法如下：

HomePage部分代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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部分代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  export default {
    name: 'SecendPage',
    data() {
        return {}
    },
    methods: {
      toHome() {
        Bus.$emit("postData","hello00");
        history.back();
      }
    }
  }
</script>

来看看控制台的效果：

image

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

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

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

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

1
2
3
4
5
6
新組件： beforeCreate
新組件： created
新組件： beforeMount
旧組件： beforeDestroy
旧組件： destroy
新組件： mounted

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

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

HomePage部分代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// HomePage

<script>
    export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Home'
      }
    },
    created(){
        Bus.$on("postData",data=> {
            this.msg = data;
          })
    }
}
</script>
SecondPage部分代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
  export default {
    name: 'SecendPage',
    data() {
        return {}
    },
    methods: {
      toHome() {
        history.back();
      }
    },
    destroyed(){
        Bus.$emit("postData","hello00");
    }
  }
</script>

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

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