javascript - After the VUE parent component model changes, why do the props passed into the child component not change?

Question

After the VUE parent component model is changed, why do the props passed to the child component not change?

Parent component

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

Subassembly

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

After I click the test method, I change the banner of the parent component. Why does the model of the subcomponent not change after the banner is passed into the subcomponent?

Answer 1

Because your template uses the data in data instead of props. You only assign values ​​to data during initialization. If you need to change data when props changes, you need to add a watch. But in your case Just use props directly.

Answer 2

The data sent from the parent component can be used directly after receiving it with props. There is no need to declare a data again to receive it