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來接收