v-model w komponentach ​

Począwszy od Vue 3.4, zalecanym podejściem do osiągnięcia tego jest użycie makra defineModel():

<script setup> const model = defineModel()  function update() {  model.value++ } </script>  <template>  <div>Związany v-model rodzica to: {{ model }}</div>  <button @click="update">Zwiększ</button> </template>

Rodzic może następnie powiązać wartość za pomocą v-model:

<Child v-model="countModel" />

Wartość zwracana przez defineModel() jest referencją (ref). Może być ona odczytywana i modyfikowana jak każda inna referencja, z tą różnicą, że działa jako dwukierunkowe wiązanie między wartością rodzica a wartością lokalną:

• Jej .value jest zsynchronizowana z wartością powiązaną przez rodzica za pomocą v-model;
• Kiedy jest modyfikowana przez dziecko, powoduje również aktualizację wartości powiązanej w rodzicu.

Oznacza to, że możesz również powiązać tę referencję z natywnym elementem input za pomocą v-model, co ułatwia opakowywanie natywnych elementów input przy zachowaniu takiego samego sposobu użycia v-model:

<script setup> const model = defineModel() </script>  <template>  <input v-model="model" /> </template>

Wypróbuj na playground

Pod maską ​

defineModel jest makrem dla wygody. Kompilator rozwija je do następujących elementów:

• Właściwości o nazwie modelValue, z którą synchronizowana jest wartość lokalnej referencji;
• Zdarzenia o nazwie update:modelValue, które jest emitowane, gdy wartość lokalnej referencji jest modyfikowana.

Tak wyglądałaby implementacja tego samego komponentu potomnego pokazanego powyżej przed wersją 3.4:

<script setup> const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) </script>  <template>  <input  :value="props.modelValue"  @input="emit('update:modelValue', $event.target.value)"  /> </template>

Następnie v-model="foo" w komponencie rodzica zostanie skompilowany do:

<Child  :modelValue="foo"  @update:modelValue="$event => (foo = $event)" />

Jak widać, jest to znacznie bardziej rozwlekłe. Jednak pomocne jest zrozumienie, co dzieje się pod maską.

Ponieważ defineModel deklaruje właściwość (prop), możesz zadeklarować opcje bazowej właściwości, przekazując je do defineModel:

// v-model jako wymagane const model = defineModel({ required: true })  // zdefiniowana wartość podstawowa const model = defineModel({ default: 0 })

<script setup> const model = defineModel({ default: 1 }) </script>

<script setup> const myRef = ref() </script>  <template>  <Child v-model="myRef"></Child> </template>

W komponencie potomnym możemy obsłużyć odpowiedni argument przekazując ciąg znaków do defineModel() jako jego pierwszy argument:

<script setup> const title = defineModel('title') </script>  <template>  <input type="text" v-model="title" /> </template>

Wypróbuj na Playground

Jeśli potrzebne są również opcje właściwości (prop), powinny być one przekazane po nazwie modelu:

const title = defineModel('title', { required: true })

<script setup> defineProps({  title: {  required: true  } }) defineEmits(['update:title']) </script>  <template>  <input  type="text"  :value="title"  @input="$emit('update:title', $event.target.value)"  /> </template>

<script setup> const firstName = defineModel('firstName') const lastName = defineModel('lastName') </script>  <template>  <input type="text" v-model="firstName" />  <input type="text" v-model="lastName" /> </template>

Wypróbuj na Playground

<script setup> defineProps({  firstName: String,  lastName: String })  defineEmits(['update:firstName', 'update:lastName']) </script>  <template>  <input  type="text"  :value="firstName"  @input="$emit('update:firstName', $event.target.value)"  />  <input  type="text"  :value="lastName"  @input="$emit('update:lastName', $event.target.value)"  /> </template>

Modyfikatory dodane do v-model komponentu są dostępne w komponencie potomnym poprzez destrukturyzację wartości zwracanej przez defineModel() w następujący sposób:

<script setup> const [model, modifiers] = defineModel()  console.log(modifiers) // { capitalize: true } </script>  <template>  <input type="text" v-model="model" /> </template>

Aby warunkowo dostosować sposób odczytu/zapisu wartości w zależności od modyfikatorów, możemy przekazać opcje get i set do defineModel(). Te dwie opcje otrzymują wartość podczas operacji get/set referencji modelu i powinny zwracać przekształconą wartość. Oto jak możemy wykorzystać opcję set do zaimplementowania modyfikatora capitalize:

<script setup> const [model, modifiers] = defineModel({  set(value) {  if (modifiers.capitalize) {  return value.charAt(0).toUpperCase() + value.slice(1)  }  return value  } }) </script>  <template>  <input type="text" v-model="model" /> </template>

Wypróbuj na Playground

<script setup> const props = defineProps({  modelValue: String,  modelModifiers: { default: () => ({}) } })  const emit = defineEmits(['update:modelValue'])  function emitValue(e) {  let value = e.target.value  if (props.modelModifiers.capitalize) {  value = value.charAt(0).toUpperCase() + value.slice(1)  }  emit('update:modelValue', value) } </script>  <template>  <input type="text" :value="props.modelValue" @input="emitValue" /> </template>