细说vue3中的defineModel

开门见山不废话，直接上代码

// 组件Com
const data = defineModel('value', {
  type: String,
  // 其他设置，这里的配置项和props一样
})

data.value = "hello world" // 这会触发update:value事件

// 父组件
<Com v-model:value="data" />

defineModel的第一个参数用来配置v-model指令参数。 事实上，你也可以不填这个参数，这样的话会默认绑定modelValue，下面是示例：

// 组件Com
const value = defineModel({
  type: String,
  // 其他设置，这里的配置项和props一样
})

// 父组件
<Com v-model="value" />

组件中的defineModel默认绑定modelValue，也就是说上面的代码等价于：

// 组件Com
const data = defineModel('modelValue', {
  type: String,
  // 其他设置，这里的配置项和props一样
})

// 父组件
<Com v-model:modelValue="data" />

有时候你可能会想要获取修饰符，比如

<Com v-model.trim="data" />

在组件中，你可以这么用

const [data, modifiers] = defineModel()

// 对应 v-model.trim 
if (modelModifiers.trim) { 
  // ... 
}

你还可以使用get set转换器，这里给出一个官方示例：

const [modelValue, modelModifiers] = defineModel({
  // get() 省略了，因为这里不需要它
  set(value) {
    // 如果使用了 .trim 修饰符，则返回裁剪过后的值
    if (modelModifiers.trim) {
      return value.trim()
    }
    // 否则，原样返回
    return value
  }
})

完毕！