javascript / expert
Snippet
v-model Abfangen mit defineModel
Vue 3.4 hat eine leistungsstarke Methode zur Handhabung von v-model-Modifiern eingeführt. Durch Destrukturierung von 'defineModel' können Sie auf benutzerdefinierte Modifier zugreifen und den 'set'-Transformer verwenden, um die Daten abzufangen und zu modifizieren, bevor sie zum Parent zurückfließen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
// In a Child Componentconst [modelValue, modifiers] = defineModel({set(value) {if (modifiers.capitalize) {return value.charAt(0).toUpperCase() + value.slice(1);}return value;}});// In Parent// <MyInput v-model.capitalize="name" />
vue
Erklärung
1
if (modifiers.capitalize)
Prüft, ob der '.capitalize'-Modifier beim Parent-Aufruf verwendet wurde.
2
set(value) { ... }
Eine Transformer-Funktion, die den ausgehenden Wert bereinigt.