JavaScript - Pemindahan data antara vue dan komponen gagal

Question

Event Bus digunakan untuk pemindahan data antara dua komponen, tetapi terdapat masalah semasa penugasan data.

Komponen yang menerima data:

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

Dalam konsol dan log, kita dapat melihat bahawa fungsi yang dicipta telah dipanggil dan this.movie telah ditetapkan semula, tetapi UI pada antara muka tidak berubah, dan semasa this.movie dicetak masih menjadi objek kosong ini?

Answer 1

Jawab sendiri, terutamanya kerana saya tidak faham mekanisme Bas. Apabila komponen itu membuat panggilan balik, pancaran komponen lain telah pun dihantar, menyebabkan on tidak menerima acara.

Answer 2

Apabila memberikan nilai kepada objek dalam Vue, jika atributnya tidak diisytiharkan dalam data, tugasan dinamik mungkin tidak berfungsi Anda boleh cuba menambah atribut nama dan ia sepatutnya baik. Anda boleh menyemak arahan rasmi vue https://vuefe.cn/v2/guide/rea... Langkah pertama untuk maju——tukar masalah pengesanan

Disebabkan pengehadan Javascript moden (dan penamatan Object.observe), Vue tidak dapat mengesan penambahan atau pemadaman sifat objek. Memandangkan Vue melakukan proses penukaran getter/setter pada hartanah semasa memulakan instance, sifat tersebut mesti wujud pada objek data agar Vue menukarnya supaya ia responsif.

Answer 3

Siarkan semua kod?

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

Saya tidak tahu apa yang mereka berdua lakukan.