双向绑定2个子组件

<!-- 父组件 -->
<template>
  <div>
    <child-component1 v-model="data1"></child-component1>
    <child-component2 v-model="data2"></child-component2>
  </div>
</template>

<script>
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';

export default {
  components: {
    ChildComponent1,
    ChildComponent2
  },
  data() {
    return {
      data1: '',
      data2: ''
    };
  }
};
</script>

<!-- 子组件1 -->
<template>
  <div>
    <input type="text" v-model="value" />
  </div>
</template>

<script>
export default {
  props: ['value'],
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue);
      }
    }
  }
};
</script>

<!-- 子组件2 -->
<template>
  <div>
    <input type="text" v-model="value" />
  </div>
</template>

<script>
export default {
  props: ['value'],
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue);
      }
    }
  }
};
</script>