初探 vue 3.0 自定义组件的 v-model

vue 2.2.0+ 时增加了一个自定义组件的语法糖 v-model，具体的用法 vue官方文档 有比较详细的介绍，我这里不多做赘述，直接上 3.0 的方法体验

1. 基本使用方法

父组件
<SimpleDemo v-model="bar" />

子组件
<a-input type="text" :value="modelValue" @input="onSearchInput" />

props:{
　　 modelValue:{
　　　type:String
　　}
}
methods:{
　onSearchInput(event: any): void {
　　this.$emit("update:modelValue",event.target.value);
　}
}

２.setUp 使用

父组件
<SimpleDemo v-model="bar" />

子组件
<a-input type="text" :value="modelValue" @input="onSearchInput" />

props:{
　　 modelValue:{
　　　type:String
　　}
}
setup(props, { emit }) {
　　const onSearchInput = (event: any) => {
　　　　emit("update:modelValue", event.target.value);
　　};
　　return {
　　　onSearchInput
　　};
}

3. 使用 computed property 的功能来定义 getter 和 setter。

父组件
<SimpleDemo v-model="bar" />

子组件
<a-input type="text" class="demo-input" v-model:value="barValue" />

props:{
　　 modelValue:{
　　　type:String
　　}
}
computed:{
　　barValue: {
　　　get(): string {
　　　　　return this.modelValue;
　　　},
　　　set(v: string): void {
　　　　this.$emit("update:modelValue", v);
　　　}
　　}
}

4. v-model 参数：默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称：

父组件
<SimpleDemo v-model:foo="bar" />

子组件
<a-input type="text" class="demo-input" v-model:value="barValue" />

props:{
　　 foo:{
　　　type:String
　　}
}
computed:{
　　barValue: {
　　　get(): string {
　　　　　return this.foo;
　　　},
　　　set(v: string): void {
　　　　this.$emit("update:foo", v);
　　　}
　　}
}