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

问题描述

问 题

两个组件之间使用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还是空对象，这是为什么？

解决方案

自己回答一下，主要是没理解Bus的机制。那个组件created回调时，另一个组件的emit已经发出，导致on没有收到事件。

这篇关于javascript - vue同组件之间数据传递失效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！