vue2 父子组件通过v-model双向通信

在 Vue 2 中，父子组件之间可以通过 `v-model` 实现双向通信。下面是一个示例：

父组件：

<template>
  <div>
    <p>父组件的值：{{ parentValue }}</p>
    <ChildComponent v-model="parentValue"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: ''
    };
  }
};
</script>

子组件（ChildComponent.vue）：

<template>
  <div>
    <p>子组件的值：{{ childValue }}</p>
    <input v-model="childValue" />
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      childValue: this.value
    };
  },
  watch: {
    value(newVal) {
      this.childValue = newVal;
    },
    childValue(newVal) {
      this.$emit('input', newVal);
    }
  }
};
</script>

在父组件中，使用 `v-model` 绑定到一个名为 `parentValue` 的 data 属性上，然后将该属性传递给子组件。子组件中，通过 `props` 接收父组件传递的值，并在子组件内部定义一个名为 `childValue` 的 data 属性来保存子组件的值。同时，使用 `watch` 监听父组件传递的值变化，并将新值赋给 `childValue`。当子组件的值发生变化时，通过 `$emit` 方法触发名为 `input` 的自定义事件，将新值传递给父组件。

这样，父子组件之间就可以通过 `v-model` 实现双向通信了。当父组件的值发生改变时，子组件会随之更新；当子组件的值发生改变时，也会同步更新到父组件中。