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

Question

Props are not updated when I change them in parent component

Parent component:

I have controlData value as defaul value for child component prop control which is equal 2 and I can see that value when I run my app first time

data() {
  return {
    controlData: 2
  }
}

In ready() I need to load data from back-end and to set that value to child component prop control equal to the data from back-end.

But lets say that now I just want to change control (value in child) when parent component is ready. So I made this in parent component:

ready() {
  this.controlData = 55;
}

Then I use v-bind to send that value in child when controlData is changed

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

Child component:

I have this in my child component

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

I added also watch: {} to look for changes of props but I can't see the changes

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

The code you have posted should update the child prop if correctly implemented.

One thing to note, the child's ready() hook will be executed BEFORE the parent ready() hook. So you should see the console log the following:

2
Control is changed

This is working for me using 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>