v-model双向数据绑定

v-model双向数据绑定

Created: Oct 13, 2020 1:56 PM
功能: v-model

vue3的v-model不仅可以绑定value还可以绑定别的属性

• 重大变更：在自定义组件上使用 v-model 时，属性以及事件的默认名称变了：
  • 属性：value => modelValue
  • 事件：input => update:modelValue
• 重大变更：v-bind 的 .sync 修饰符和组件的 model 选项被干掉了，取而代之的是 v-model 参数
• 新特性： 支持同一组件同时设置多个 v-model
• 新特性：支持开发者自定义 v-model 修饰符

<KyrieInput v-model="name" />
<！-- 这两行其实是一样的 -->
<KyrieInput :modelValue="name" @update:modelValue="name = $event" />

v-model 参数

如果要改变绑定的属性名，只需要给 v-model 传递一个参数就好了：

<KyrieInput v-model:title="name" />
<!-- 等同于 -->
<KyrieInput :title="name" @update:title="name = $event" />

向父组件抛出事件可以这样

methods: {
    onInputChange(e) {
      this.$emit('update:modelValue', e.target.value)
    }
  }

------------恢复内容结束------------