Vue中组件的v-model

在Vue中有表单input的v-model绑定，而组件同样可以拥有此效果。
代码如下：
父组件

//App.vue
<template>
  <div>
    <!-- <input v-model="message">
    <input :value="message" @input="message = $event.target.value"> -->
        
    <!-- 绑定两个v-model -->
    //v-model:title="title" 绑定了title属性； 监听了 @update:title的事件；
    <hy-input v-model="message" v-model:title="title"></hy-input>
    <!-- <hy-input 
      :modelValue="message" @update:model-value="message = $event"  //此为默认操作
      :title="title" @update:title="title = $event"                 //此为自定义操作
    ></hy-input> -->

    <h2>{{message}}</h2>
    <h2>{{title}}</h2>
  </div>
</template>

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

  export default {
    components: {
      HyInput
    },
    data() {
      return {
        message: "Hello World",
        title: "哈哈哈"
      }
    }
  }
</script>

子组件

//HyInput.vue
<template>
  <div>
    <input v-model="value">
    <input v-model="why">
  </div>
</template>

<script>
  export default {
    props: {
      modelValue: String,
      title: String
    },
    emits: ["update:modelValue", "update:title"],
    computed: {
      value: {
        set(value) {
          this.$emit("update:modelValue", value);
        },
        get() {
          return this.modelValue;
        }
      },
      why: {
        set(why) {
          this.$emit("update:title", why);
        },
        get() {
          return this.title;
        }
      }
    }
  }
</script>

整体思路为：
在App.vue即父组件中：
v-model=="message" 相当于::modelValue="message" @update:model-value="message = $event"；
会通过prop向子组件传值，在组件实例中接受名为默认值：modelValue；update:model-value则负责将事件抛出。

在HyInput.vue即子组件中：
在组件实例中通过v-model绑定计算属性；
而计算属性则通过setter和getter方法：get方法返回的是prop接收到modelValue；set则通过this.$emit("update:modelValue", value)，进行事件绑定与值传递，传递给父组件。