0

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

父组件：

我有controlData值作为子组件道具的默认值，control它是相等2的，当我第一次运行我的应用程序时我可以看到该值

data() {
  return {
    controlData: 2
  }
}

在ready()我需要从后端加载数据并将该值设置为子组件道具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
  }
}
4

1 回答 1

1

如果正确实施，您发布的代码应更新子道具。

需要注意的一点是，孩子的ready()钩子将在父ready()钩子之前执行。所以你应该看到控制台日志如下：

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>
于 2017-07-04T02:32:10.890 回答