当父更新道具发送给孩子时，Vuejs更新子组件的数据

Question

我有一个父级组件。它通过道具将数据发送给孩子。那个孩子也需要更新值，所以我遵循了这个pattern：

  

该道具用于传递初始值；子组件随后希望将其用作本地数据属性。在这种情况下，最好定义一个使用prop作为其初始值的本地数据属性。

您可以在此处查看示例代码：https://codesandbox.io/s/vue-template-gmh5n。您可以看到它在这里运行：https://gmh5n.csb.app/。

问题

当我更新父母的数据值时，它会更新发送给孩子的道具（我可以在Vue.js devtools中看到它）。但是孩子的本地数据值不会更新。

问题

当父母发送的道具更新时，是否可以更新孩子的本地数据值？

Answer 1

https://codesandbox.io/s/vue-template-b2d8w

是我的处理方式

与其在子级中创建数据，不如在子级中创建数据，而是在事件发生时在父级中更新数据

Answer 2

您需要注意initialCounter是否已从父级更改。

export default {
  name: "ChildWithProps",
  props: ["initialCounter"],
  data: function() {
    return {
      counter: this.initialCounter
    };
  },
  watch: {
    initialCounter(newInit) {
      this.counter = newInit;
    },
  }
};

然后，如果要在child中更新父initialCounter，则需要将函数作为prop传递给child。