javascript - VUE父组件model改变后，传入子组件的props为什么没改变？

Question

VUE父组件model改变后 传如子组件的props为什么没改变？

父组件

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

子组件

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

我点击test方法后 改变 父组件的banner 这个banner传入子组件后子组件的model为什么没改变？

Answer 1

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

Answer 2

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