[vue]子組件通過props獲取父組件數據以及使用watch解決動態數據不生效問題

父子組件的傳值，在Vue官方也寫得很清楚，父組件中使用v-bind綁定傳送，子組件使用props接收。

父組件通過v-bind綁定數據：

<template>
    <router-view :yourdata="yourdata"></router-view>
</template>
<script>
export  default {
    data:function() {
        return {
            yourdata:"這是一段測試文字。",
        }
    }
}
</script>

子組件使用props接收數據：

<template>
    <div>{{yourdata}}</div>
</template>
<script>
export  default {
    props: ['yourdata']
}
</script>

但，如果父組件的yourdata是一個動態的數據，比如是使用axios動態請求的數據，那么這個數據是不會在子組件中變更的，那么就要用到watch：

<template>
    <div>{{newdata}}</div>
</template>
<script>
export  default {
    data:function(){
        return{
            newdata:"",
        }
    },
    props: ['yourdata'],
    watch:{
        yourdata:function (newVal,oldVal) {
            this.newdata=newVal;//newVal就是獲取的動態新數據，賦值給newdata
        }
    }
}
</script>

快去嘗試一下吧~