Vue 3在组件上使用 v-model

昨天看Vue的官方文档，怎么都找不到之前在组件上使用v-model，然后组件同步取到值的方法。
后来找回Vue 2的文档，再结合Vue 3的文档，终于发现，Vue 3移除了$listeners。

以前Vue 2是通过$listeners，传递两个pros值，label和value,子组件通过v-on绑定一个方法（通过计算属性），结合$listeners，再返回去。同时监听组件事件，把组件的值 ，通过$emits返回给父组件。

父组件

<custom-input v-model="searchText"></custom-input>

Vue 2 子组件

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

Vue 3移除了listeners，原因是现在事件监听器是 $attrs 的一部分。
如何监听子组件的值呢？

• 非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改：
  prop：value -> modelValue；
  event：input -> update:modelValue；
• 非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替；

由此可知，prop的 value 值已经改成modalValue，input 事件已改为update:modalValue。

Vue 3子组件

app.component('custom-input', {
 props: ['modelValue'],
 emits: ['update:modelValue'],
 template: `
   <input
     :value="modelValue"
     @input="$emit('update:modelValue', $event.target.value)"
   >
 `
})