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.movie已经被重新赋值了，但是界面上的UI就是没变化，而且打印当前的this.movie还是空对象，这是为什么？

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)

并不知道这两个干了什么。