JavaScript – Die Datenübertragung zwischen Vue und Komponenten schlägt fehl

Question

Event Bus wird für die Datenübertragung zwischen den beiden Komponenten verwendet, es gibt jedoch ein Problem bei der Datenzuordnung.

Komponenten, die Daten akzeptieren:

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

In der Konsole und im Protokoll können wir sehen, dass die erstellte Funktion aufgerufen und this.movie neu zugewiesen wurde, aber die Benutzeroberfläche auf der Benutzeroberfläche hat sich nicht geändert und das aktuell gedruckte this.movie ist immer noch ein leeres Objekt. Warum? Das?

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)

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