Vue3.js自定义组件 v-model详解
作者:彭世瑜
在Vue3 中,v-model是用于创建双向数据绑定的指令,通常,我们使用该指令将任何 HTML 表单元素与一个变量绑定以收集输入值,本文给大家介绍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> <input type="text" :value="title" @input="$emit('update:title', $event.target.value)" /> </template>
到此这篇关于Vue3.js自定义组件 v-model的文章就介绍到这了,更多相关Vue3 v-model内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!