vue同组件之间数据传递失效

Question

两个组件之间使用Event Bus进行数据传递，但是数据赋值时出现了问题.

接受数据的组件：

<template>

  <div>

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

  </div>

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

那个组件created回调时，另一个组件的emit已经发出，导致on没有收到事件。