javascript - vue同組件之間資料傳遞失效

Question

兩個元件之間使用Event Bus進行資料傳遞，但是資料賦值時出現了問題.

接受資料的元件：

<template>
  <p>
     <h1>{{movie.name}}</h1>
  </p>
</template>

<script>
  import Bus from '../bus.js'
  export default {
    name: 'MovieDetail',
    data: function () {
      return {
        movie: {},
        index: 110
      }
    },
    methods: {
      downloadPic () {
        console.log('name=' + this.movieName + ', name2=' + this.movie.name)
      }
    },
    created () {
      Bus.$on('loadMovie', (index, movie) => {
        console.log('index=' + this.index + ', movie=' + this.movie)
        this.setMovie(movie)
        this.setIndex(index)
        console.log('movie name=' + this.movie.name)
      })
    },
    computed: {
      movieName: function () {
        if (this.movie) {
          return this.movie.name
        }
      }
    }
  }
</script>

console,log裡面已經看到created函數被調用，this.movi​​e已經被重新賦值了，但是界面上的UI就是沒變化，而且打印當前的this.movi​​e還是空對象，這是為什麼？

Answer 1

自己回答一下，主要是沒理解Bus的機制。那個元件created回呼時，另一個元件的emit已經發出，導致on沒有收到事件。

Answer 2

vue裡面物件賦值的時候，如果沒有在data裡面宣告他的屬性，動態賦值可能會不起作用，你加個name屬性試下應該就好了。可以去看看vue官方說明https://vuefe.cn/v2/guide/rea... 進階第一條----變化檢測問題

受現代 Javascript 的限制（以及廢棄 Object.observe），Vue 無法偵測到物件屬性的新增或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉換過程，所以屬性必須在 data 物件上存在才能讓 Vue 轉換它，這樣才能讓它是回應的。

Answer 3

貼出全部程式碼？

this.setMovie(movie)
this.setIndex(index)

並不知道這兩個做了什麼。