做网站行情,郑州微信网站开发,中国建设银行官网首页 网站首页,下载168网站1. 基础用法
在 Vue3 中#xff0c;v-model 在组件上的使用有了更灵活的方式。默认情况下#xff0c;v-model 使用 modelValue 作为 prop#xff0c;update:modelValue 作为事件。
1.1 基本示例
!-- CustomInput.vue --
templateinput:valuemo…1. 基础用法
在 Vue3 中v-model 在组件上的使用有了更灵活的方式。默认情况下v-model 使用 modelValue 作为 propupdate:modelValue 作为事件。
1.1 基本示例
!-- CustomInput.vue --
templateinput:valuemodelValueinput$emit(update:modelValue, $event.target.value)/
/templatescript setup
defineProps([modelValue])
defineEmits([update:modelValue])
/script!-- 父组件使用 --
templateCustomInput v-modelsearchText /
/templatescript setup
import { ref } from vue
const searchText ref()
/script1.2 使用 computed 实现双向绑定
!-- CustomInput.vue --
templateinput v-modelinputValue /
/templatescript setup
import { computed } from vueconst props defineProps([modelValue])
const emit defineEmits([update:modelValue])// 使用计算属性实现双向绑定
const inputValue computed({get() {return props.modelValue},set(value) {emit(update:modelValue, value)}
})
/script2. 自定义 v-model 名称
Vue3 允许我们在同一个组件上使用多个 v-model每个 v-model 可以有自己的名称。
2.1 单个自定义名称
!-- CustomField.vue --
templateinput:valuetitleinput$emit(update:title, $event.target.value)/
/templatescript setup
defineProps([title])
defineEmits([update:title])
/script!-- 父组件使用 --
templateCustomField v-model:titlearticleTitle /
/templatescript setup
import { ref } from vue
const articleTitle ref(默认标题)
/script2.2 多个 v-model 绑定
!-- UserForm.vue --
templatediv classforminput:valuefirstNameinput$emit(update:firstName, $event.target.value)/input:valuelastNameinput$emit(update:lastName, $event.target.value)//div
/templatescript setup
defineProps([firstName, lastName])
defineEmits([update:firstName, update:lastName])
/script!-- 父组件使用 --
templateUserFormv-model:firstNameuser.firstNamev-model:lastNameuser.lastName/
/templatescript setup
import { reactive } from vueconst user reactive({firstName: John,lastName: Doe
})
/script3. v-model 修饰符
3.1 内置修饰符
!-- CustomInput.vue --
templateinput:valuemodelValueinput$emit(update:modelValue, $event.target.value)/
/templatescript setup
defineProps({modelValue: String,modelModifiers: { default: () ({}) }
})
/script!-- 父组件使用 --
templateCustomInput v-model.trimtext /
/template3.2 自定义修饰符
!-- CustomInput.vue --
templateinput:valuemodelValueinputhandleInput/
/templatescript setup
const props defineProps({modelValue: String,modelModifiers: { default: () ({}) }
})const emit defineEmits([update:modelValue])const handleInput (event) {let value event.target.value// 检查是否应用了 capitalize 修饰符if (props.modelModifiers.capitalize) {value value.charAt(0).toUpperCase() value.slice(1)}emit(update:modelValue, value)
}
/script!-- 父组件使用 --
templateCustomInput v-model.capitalizetext /
/template4. 实际应用示例
4.1 自定义数字输入组件
!-- NumberInput.vue --
templatediv classnumber-inputbutton clickdecrease-/buttoninputtypenumber:valuemodelValueinputhandleInput:stepstep/button clickincrease/button/div
/templatescript setup
const props defineProps({modelValue: {type: Number,required: true},step: {type: Number,default: 1},min: {type: Number,default: -Infinity},max: {type: Number,default: Infinity}
})const emit defineEmits([update:modelValue])const handleInput (event) {const value Number(event.target.value)if (isValidValue(value)) {emit(update:modelValue, value)}
}const increase () {const newValue props.modelValue props.stepif (isValidValue(newValue)) {emit(update:modelValue, newValue)}
}const decrease () {const newValue props.modelValue - props.stepif (isValidValue(newValue)) {emit(update:modelValue, newValue)}
}const isValidValue (value) {return value props.min value props.max
}
/script!-- 父组件使用 --
templateNumberInputv-modelquantity:step1:min0:max100/
/templatescript setup
import { ref } from vue
const quantity ref(1)
/script4.2 颜色选择器组件
!-- ColorPicker.vue --
templatediv classcolor-pickerdivclasscolor-preview:style{ backgroundColor: modelValue }/divinputtypecolor:valuemodelValueinput$emit(update:modelValue, $event.target.value)/inputtypetext:valuemodelValueinputhandleInputplaceholder#000000//div
/templatescript setup
const props defineProps({modelValue: {type: String,default: #000000}
})const emit defineEmits([update:modelValue])const handleInput (event) {const value event.target.value// 验证是否为有效的颜色值if (/^#[0-9A-Fa-f]{6}$/.test(value)) {emit(update:modelValue, value)}
}
/script!-- 父组件使用 --
templateColorPicker v-modelthemeColor /
/templatescript setup
import { ref } from vue
const themeColor ref(#42b883)
/script5. 最佳实践 命名规范 使用语义化的 prop 名称保持事件名称与 prop 名称的一致性使用 update: 前缀作为事件名称 类型检查 为 props 定义明确的类型在必要时添加自定义验证处理无效输入 值的验证 在更新值之前进行验证提供适当的错误反馈实现合理的默认值处理 性能优化 避免不必要的值更新使用计算属性优化复杂逻辑合理使用防抖和节流
