Vue2 如何实现多个双向绑定

Vue2 的双向绑定方式， 父子组件只能使用一个 v-model , 但是如果是多个怎么办呢？

只能自己模拟一个 v-model 了！！！

Parent component

<template>
  <div>
    {{ name }}
    <!-- eslint-disable-next-line -->
    <ChildComponent
      v-model="name"
      :name1="name1"
      @changedName1="changedName1"
    />
    {{ name1 }}
  </div>
</template>

<script>
import ChildComponent from "./CustomModule";
export default {
  name: "CustomModel",
  components: {
    ChildComponent,
  },
  data() {
    return {
      name: "zh",
      name1: "zhangsan",
    };
  },
  methods: {
    changedName1(value) {
      this.name1 = value;
    },
  },
};
</script>

<style></style>

child Component

<template>
  <div>
    <input
      :value="name"
      @input="$emit('change', $event.target.value)"
      type="text"
    />
    <input
      type="text"
      :value="name1"
      @input="$emit('changedName1', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  model: {
    prop: "name",
    event: "change",
  },
  props: {
    name: {
      type: String,
      default() {
        return "";
      },
    },
    name1: {
      type: String,
      default() {
        return "";
      },
    },
  },
};
</script>

<style></style>