VueJS - 小道具私は親コンポーネントでそれらを変更したとき

Question

小道具が更新されていない親の変化によって、子コンポーネントで更新されていない

親コンポーネント：

私は、子コンポーネントのdefaul値としてcontrolData値を持っています2等しく、私はで

data() { 
    return { 
    controlData: 2 
    } 
} 

私のアプリを初めて実行したとき、私はその値を見ることができるcontrolを支えます3210バックエンドからデータをロードし、その値をバックエンドのデータと等しい子コンポーネントprop controlに設定する必要があります。

親コンポーネントの準備ができたら、今度はcontrol（子の値）を変更したいとしましょう。は、だから私は、親コンポーネントでこれを作っ：controlDataが変更されたとき

ready() { 
    this.controlData = 55; 
} 

は、その後、私は子供にその値を送信するために、V-バインドを使用

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

私はpropsの変化を見てもwatch: {}を追加しましたが、私は正しく実装されていれば、変更

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>