在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。

今天扒拉官方文档，发现.sync这块还是理解的不是太好，于是写一个demo，做一下记录。

使用场景：对一个 prop 进行“双向绑定”

prop是啥？？

单项数据流，所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。

怎么进行“双向绑定”？

父组件：

<template>
  <div id="app">
    父组件输入框：<input v-model="inputValue"> <br> 父组件值：{{inputValue}}
    <hr />
    子组件：<child :fatherInput.sync="inputValue"></child>
  </div>
</template>

<script>
import child from './components/child.vue';
export default {
  name: 'app',
  props: [],
  data() {
    return {
      inputValue: '',
    };
  },
  components: {
    child,
  },
  methods: {},
};
</script>

子组件：

<template>
  <div>
    父组件传递的值： {{fatherInput}} <br>
    子组件输入框：<input v-model="childInput">
  </div>
</template>
<script>
export default {
  props: {
    fatherInput: String,
  },
  data() {
    return {
      childInput: null,
    };
  },
  computed: {},
  watch: {
    childInput() {
      this.$emit('update:fatherInput', this.childInput);
    },
  },
  methods: {},
};
</script>

上图是没问题的，父级 prop 的更新会向下流动到子组件。

父组件需要添加.sync：

:fatherInput.sync="inputValue"

子组件以 update:myPropName 的模式触发事件：

this.$emit('update:fatherInput', this.childInput);

这样，我在子组件中改变childInput，通过watch监听，同步给父组件inputValue。

更多注意事项：自定义事件---.sync 修饰符