VueJS-道具不会通过父项的更改在子项中更新

Question

当我在父组件中更改道具时，它们不会更新

父组件：

我有controlData值作为子组件prop control默认值，等于2并且在我第一次运行应用程序时可以看到该值

data() {
  return {
    controlData: 2
  }
}

在ready()我需要从后端加载数据并将该值设置为与后端数据相等的子组件prop control 。

但是可以说，现在我只想在父组件准备就绪时更改control （子项中的值）。 所以我在父组件中做了这个：

ready() {
  this.controlData = 55;
}

然后，当controlData更改时，我使用v-bind在子级中发送该值

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