Two-way 在 Vue.js 中与 prop.sync 和观察者绑定

Question

我无法理解 parent 和 child 组件之间的 two-way 绑定。到目前为止，我所阅读的内容似乎建议在观看道具时使用 prop.sync。例如：

Parent:

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

Child:

<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 更新时，这不会产生某种冗余吗？因此，流程将是（parent数据已更改）：

parent数据变化->
触发手表 ->
child数据变化->
触发.sync ->
parent数据已更新。

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

我的问题是，如果我的推理是正确的，那么对 parent 的更改将存在某种冗余，数据将转到 child 并反映回自身，反之亦然。反射是冗余。到目前为止我是对的吗？还是我的理解完全不对？

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

Answer 1

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

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

Two-way 在 Vue.js 中与 prop.sync 和观察者绑定

Two-way binding in Vue.js with prop.sync and watcher

javascript

vue.js

two-way-binding