vue 項目有兩個組件：hello 組件、apple 組件，這兩個組件是兄弟組件，想實現(xiàn)的效果是 hello 組件里的數(shù) num 隨機增加之后，apple 組件的 num 也共享這個狀態(tài)，同時增加。

所以，在全局寫了一個 eventbus，然后在 hello 組件里點擊增加按鈕的時候會發(fā)送一個 ‘add’ 事件，把這個 num 發(fā)送出去，然后在 apple 組件監(jiān)聽這個 ‘add’ 事件。

寫完之后，在 hello 組件里面引入 apple 組件，然后注冊，然后寫在 template 里，打開瀏覽器，訪問 hello 組件，點擊增加按鈕，apple 組件會同時更新狀態(tài)，沒有問題。

現(xiàn)在問題來了，我先在 hello 組件點擊增加按鈕，發(fā)送 ‘add’ 之后，然后跳轉到 apple 組件頁面，發(fā)現(xiàn) num 沒有變，這是為什么？這應該不是跨域問題把？

hello 組件代碼：

<template>
  <div>
    <h1>hello組件</h1> {{ num }}
    <button @click="handleAdd">隨機增加</button>
    <router-link to="/apple">to apple</router-link>
    <Apple></Apple>
  </div>
</template>
<script>
import Apple from './Apple'
export default {
  components: { Apple },
  data () {
    return { num: 0 }
  },
  methods: {
    handleAdd () {
      this.num = Math.floor(Math.random() * 100 + 1)
      this.$bus.emit('add', this.num)
    }
  }
}
</script>

apple 組件代碼：

<template>
  <div>
    <h1>apple組件</h1> {{ num }}
  </div>
</template>

<script>
export default {
  data () {
    return { num: 0 }
  },
  created () {
    this.$bus.on('add', val => {this.num = val})
  }
}
</script>

bus 代碼：

const install = function (Vue) {
  const Bus = new Vue({
    methods: {
      emit (event, ...args) {
        this.$emit(event, ...args)
      },
      on (event, callback) {
        this.$on(event, callback)
      },
      off (event, callback) {
        this.$off(event, callback)
      }
    }
  })
  Vue.prototype.$bus = Bus
}

export default install