VueJS - 道具不更新子組件由父母不更新

Question

道具的變化，當我在父組件改變他們

父組件：

我controlData值作爲子組件defaul值託control等於2，我可以看到，值當我運行我的應用程序第一次

data() { 
    return { 
    controlData: 2 
    } 
} 

在ready()我需要從後端加載數據，並將該值設置爲等於來自後端的數據的子組件prop control。

但讓我們說，現在我只想在父組件準備就緒時更改control（子值）。所以我在父組件做出這樣的：

ready() { 
    this.controlData = 55; 
} 

然後我用V-綁定到送孩子該值時controlData改變

<child-component :control="controlData"></child-componenet> 

子組件：

我有這在我的孩子組件

export default Bar.extend({ 
    props: ["control"], 
    ready() { 
     console.log(this.control); // I see only default value "2" not "55" - but I expect to see "55" because I changed that value in ready() of parent 
    } 
}) 

我還添加watch: {}尋找的props變化，但我看不到變化

watch: { 
    control() { 
    console.log("Control is changed"); // I don't see this message when I change controlData value in parent and then by v-bind:control="controlData" i send that data in child component 
    } 
} 

Answer 1

您發佈應該更新孩子的道具，如果正確實施代碼。

有一點要注意，孩子的就緒（）鉤將父就緒（）掛鉤之前執行。所以，你應該看到控制檯登錄以下：

2 
Control is changed 

這是爲我工作使用Vue的1.0.28：

https://codepen.io/camaulay/pen/wejpPa?editors=1011

JS：

var child = Vue.extend({ 
    template: '<div>Child data: {{ control }}</div>', 
    props: ['control'], 
    ready() { 
     console.log(this.control); 
    }, 
    watch: { 
    control() { 
     console.log("Control is changed") 
     console.log(this.control) 
    } 
    } 
}) 

var app = new Vue({ 
    el: '#app', 
    components: { 
    'child': child 
    }, 
    data() { 
    return { 
     controlData: 2 
    } 
    }, 
    ready() { 
    this.controlData = 55 
    } 
}) 

HTML ：

<div id="app"> 
    <child :control="controlData"></child> 
    <button @click="controlData++">Increment parent data</button> 
</div>