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）：

1. 父数据更改 ->
2. 触发监视 ->
3. 子数据更改 ->
4. 触发 .sync ->
5. 父数据已更新。

我假设循环在步骤#5 处停止，因为parentData 的更新值与旧值相同，因此parentData 并没有真正改变，因此不会触发步骤#2 观察程序。

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

如果我错了，请帮助我理解我错在哪里。但如果我是对的，那么还有另一种方法可以实现双向绑定而不需要这种冗余吗？

Answer 1

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

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