Vue.js 中使用 prop.sync 和 watcher 的双向绑定

Question

我无法理解父组件和子组件之间的双向绑定。到目前为止，我所阅读的内容似乎建议将 prop.sync 与观看道具结合使用。例如：

家长：

<child-component :childProp.sync="parentData"></child-component>

孩子：

<template>
  <input v-model="childData" @input="$emit('update:childProp', childData);"></input>
</template>
<script>
  export default {
    props: ['childProp'],
    data() {
      childData: childProp
    },
    watch: {
      childProp(newValue) {
        this.childData = newValue;
      }
    }
  }
</script>

我的问题是，当 parentData 或 childData 更新时，这不会造成某种冗余吗？ 因此，流程将是（对于 parentData 更改）：

1. parentData 更改 ->
2. 触发手表->
3. childData 更改 ->
4. 触发 .sync ->
5. parentData 已更新。

我假设循环在第 5 步停止，因为 parentData 的更新值与旧值相同，所以 parentData 并没有真正改变，因此第 2 步观察者没有被触发。

我的问题是，如果我的推理是正确的，就会有某种冗余，因为对 parentData 的更改将传递给孩子并反映回自身，反之亦然。反射是冗余。到目前为止我是对的吗？还是我对此的理解完全错误？

如果我错了，请帮助我了解我哪里出错了。但如果我是对的，那么是否有另一种方法可以在没有这种冗余的情况下实现双向绑定？

Answer 1

我想你可以像这样简化子组件代码：

<template>
  <input :value="childProp" @input="$emit('update:childProp', $event);"></input>
</template>
<script>
  export default {
    props: ['childProp']
  }
</script>