v-model 在组件中的用法

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：

实现一个简单父子组件双向绑定

/* Parent.vue */
const model = ref("")
<Child v-model="model"></Child>

/* Child.vue */
const model = defineModel()
<input v-model="model" />

底层机制参见此处

参数

很多时候我们需要用到参数,比如我们需要传多个消息的时候, 这里传参的方式很简单, 只需要在:后指定名字即可:

/* parent.vue */
const firstName = ref("")
const lastName = ref("")

<Child v-model:firstName="firstName" v-model:lastName="lastName"></Child>

/* Child.vue */
const firstName = defineModel("firstName")
const lastName = defineModel("lastName")
// 下面照常传回即可
...  

自定义修饰符

除了.trim .number .lazy 外,我们还可以自己定义修饰符,方法也很简单

/* Child.vue */
const [model, modidiers] = defineModel({
    set(value) {
        if (model.修饰符名) {
            // 这里对value进行处理,比如转首字母大写,最后return 新值即可
            ...
        }
        return value
    }
})

同时,修饰符可以带参数,这里不再赘述