Vue中的EventBus使用時你遇到過這個問題嗎？？？

重慶崽兒brand發表於2018-04-14
Vue

本文首發在個人的部落格上，地址：重慶崽兒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>
複製程式碼

頁面效果如圖：

HomePage
SecondPage

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>
複製程式碼

來看看控制檯的效果：

image

從控制檯可以看到，當我們從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開發中遇到的一些值得解除安裝小本本上的問題唄~~~

相關文章