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>