javascript - Warum ändern sich die an die untergeordnete Komponente übergebenen Requisiten nicht, nachdem sich das übergeordnete VUE-Komponentenmodell geändert hat?

Question

Warum ändern sich die an die untergeordnete Komponente übergebenen Requisiten nicht, nachdem das Modell der übergeordneten VUE-Komponente geändert wurde?

Übergeordnete Komponente

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

Unterkomponente

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

Nachdem ich auf die Testmethode geklickt habe, ändere ich das Banner der übergeordneten Komponente. Warum ändert sich das Modell der Unterkomponente nicht, nachdem das Banner an die Unterkomponente übergeben wurde?

Answer 1

因为你模版中用的是 data 里面的数据, 而不是 props 里面的, 你只在初始化的时候给 data 赋值, 如果需要 props 改变的同时改变 data, 那就需要加上 watch, 不过你这种情况直接用 props 就好了.

Answer 2

父组件传来的数据 用 props接收之后就能直接用了，不用再次声明一个data来接收