Vue中的EventBus使用時你有過這種狀況嗎？？？？

時間 2019-11-09

標籤 vue eventbus 使用這種狀況简体版

原文原文鏈接

本文首發在我的的博客上，地址：重慶崽兒Brand，歡迎訪問~~~~html

最近作公司項目遇到這樣一個需求：

從一個頁面跳轉到另外一個頁面去選擇一些信息，選擇好後返回上一個頁面，並把選擇的信息帶過來

因爲以前一直在工做中用的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:vue

<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-router

Second、開始使用EventBus

根據官方文檔（官方文檔地址），先在main.js文件中聲明一個全局的空的Vue實例：

window.Bus = new Vue();

而後修改HomePage和SecondPage兩個頁面的代碼，segmentfault

最開始個人寫法以下：

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在切換時，先加載新的組件，等新的組件渲染好可是還沒掛在前，銷燬舊的組件，而後再掛載組件ide

在路由切換時，執行的方法依次是：post

新組件： beforeCreate
新組件： created
新組件： beforeMount
舊組件： beforeDestroy
舊組件： destroy
新組件： mounted

因此，新組件只要在舊組件beforeDestroy以前，$on事件就能成功接收到。ui

現將兩個頁面的部分代碼作以下修改：

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>