Vue3.js：自定义组件 v-model

Vue3的自定义v-model和vue2稍有不同

文档

• https://cn.vuejs.org/guide/components/v-model.html

原生组件

<input v-model="searchText" />

等价于

<input:value="searchText"@input="searchText = $event.target.value"
/>

自定义组件

<CustomInput v-model="searchText" />

等价于

<CustomInput:model-value="searchText"@update:model-value="newValue => searchText = newValue"
/>

CustomInput实现代码1

<!-- CustomInput.vue -->
<script>
export default {props: ['modelValue'],emits: ['update:modelValue']
}
</script><template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/>
</template>

CustomInput实现代码2

<!-- CustomInput.vue -->
<script>
export default {props: ['modelValue'],emits: ['update:modelValue'],computed: {value: {get() {return this.modelValue},set(value) {this.$emit('update:modelValue', value)}}}
}
</script><template><input v-model="value" />
</template>

v-model 的参数

默认使用的是modelValue, 可以自定义参数名

<MyComponent v-model:title="bookTitle" />

组件实现

<!-- MyComponent.vue -->
<script>
export default {props: ['title'],emits: ['update:title']
}
</script><template><inputtype="text":value="title"@input="$emit('update:title', $event.target.value)"/>
</template>