javascript - Selepas model komponen induk VUE berubah, mengapa prop yang dihantar ke komponen anak tidak berubah?

Question

Selepas model komponen induk VUE ditukar, mengapa prop yang dihantar kepada komponen anak tidak berubah?

Komponen induk

<script>
    import Slide from "./slide/slide"
    var vm = {
        data(){
            return {
                banner:100
            }
        },
        methods: {
            test:function (argument) {
                this.banner += 10;
            }
        },
        beforeCreate(){

        },
        created(){
            
        },
        mounted(){
        },
        components: {
            Slide
        }
    }
    export default vm
</script>
<style src="./index.css" scoped></style>
<template>
    <p @click='test' class="index-content">
        <Slide :data='banner'></Slide>
        {{banner+':index'}}
    </p>
</template>

Subkomponen

<script>
export default {
  props:['data'],
  data(){
    return {
      url:this.data
    }
  },
  methods: {
  }
}

</script>

<style src="./slide.css" scoped></style>
<template>
  <p class="slide">
      {{url}}
  </p>
</template>

Selepas saya mengklik kaedah ujian, saya menukar sepanduk komponen induk Mengapa model subkomponen tidak berubah selepas sepanduk dimasukkan ke dalam subkomponen?

Answer 1

Oleh kerana templat anda menggunakan data dalam data dan bukannya prop, anda hanya memberikan nilai kepada data semasa pemulaan Jika anda perlu menukar data apabila prop berubah, anda perlu menambah jam tangan, tetapi anda Dalam kes ini, hanya gunakan prop.

Answer 2

Data daripada komponen induk boleh digunakan terus selepas menerimanya dengan props Tidak perlu mengisytiharkan data sekali lagi untuk menerimanya

.