Question

在父组件

中更改道具时，道具不会更新

父组件：

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

data() {
  return {
    controlData: 2
  }
}

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

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

ready() {
  this.controlData = 55;
}

然后我使用v-bind在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

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

有一点需要注意，孩子的 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>

VueJS - 父组件中的更改未在子组件中更新道具

1 个答案: