javascript - Pourquoi les accessoires transmis au composant enfant ne changent-ils pas après la modification du modèle du composant parent VUE?

Question

Une fois le modèle du composant parent VUE modifié, pourquoi les accessoires transmis au composant enfant ne changent-ils pas ?

Composant parent

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

Sous-composant

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

Après avoir cliqué sur la méthode de test, je change la bannière du composant parent. Pourquoi le modèle du sous-composant ne change-t-il pas une fois la bannière passée dans le sous-composant ?

Answer 1

Parce que votre modèle utilise les données dans les données au lieu des accessoires. Vous attribuez des valeurs aux données uniquement lors de l'initialisation. Si vous devez modifier les données lorsque les accessoires changent, vous devez ajouter une montre. Mais dans votre cas, utilisez simplement les accessoires.

Answer 2

Les données envoyées depuis le composant parent peuvent être utilisées directement après les avoir reçues avec des accessoires. Il n'est pas nécessaire de déclarer à nouveau une donnée pour la recevoir

.