Skip to content

Commit

Permalink
fix: remove unnecessary info in v-model.md block
Browse files Browse the repository at this point in the history
  • Loading branch information
artemktn committed Apr 4, 2024
1 parent 23332bc commit d43fbdb
Showing 1 changed file with 4 additions and 6 deletions.
10 changes: 4 additions & 6 deletions src/guide/components/v-model.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# v-model {#component-v-model}

Нормализует значения / ref-объекты / геттеры к значениям. Это похоже на [unref()](#unref), с той лишь разницей, что оно также нормализует геттеры. Если аргумент является геттером, то он будет вызван, и будет возвращено его возвращаемое значение.

## Базовое использование {#basic-usage}

`v-model` можно использовать в компоненте для реализации двустороннего связывания.
Expand Down Expand Up @@ -35,7 +33,7 @@ function update() {
Значение, возвращаемое функцией `defineModel()`, представляет собой `ref`. К ней можно получить доступ и изменить так же, как и любую другую `ref`, за исключением того, что она действует как двустороннее связывание между родительским значением и локальным значением:

- Значение `.value` синхронизировано со значением, связанным с родительским `v-model`;
- Когда оно изменяется дочерним элементом, это приводит к обновлению значения, связанного c родителем.
- Когда оно изменяется дочерним элементом, это приводит к обновлению значения, связанного с родителем.

Это означает, что вы также можете связать этот `ref` к нативному полю ввода с помощью `v-model`, что делает оборачивание элементов ввода простым и обеспечивает аналогичное использование `v-model`:

Expand Down Expand Up @@ -74,7 +72,7 @@ const emit = defineEmits(['update:modelValue'])
</template>
```

Как видите, это гораздо более многословно. Тем не менее, полезно знать, что происходит под капотом.
Как видите, это гораздо более многословно. Тем не менее полезно знать, что происходит под капотом.

Поскольку `defineModel` объявляет входные параметры, вы можете также объявить входные параметры основного свойства, передав его в `defineModel`:

Expand Down Expand Up @@ -121,7 +119,7 @@ const myRef = ref()
/>
```

При использовании в компоненте `v-model` вместо этого расширяется до этого:
При использовании на компоненте `v-model` расширяется до следующего:

```vue-html
<CustomInput
Expand All @@ -130,7 +128,7 @@ const myRef = ref()
/>
```

Для того, чтобы это действительно работало, компонент `<CustomInput>` должен выполнить две вещи:
Для того чтобы это действительно работало, компонент `<CustomInput>` должен выполнить две вещи:

1. Привязать атрибут `value` элемента `<input>` к свойству `modelValue`
2. При срабатывании события `input` элемента `<input>` генерировать событие `update:modelValue` с новым значением
Expand Down

0 comments on commit d43fbdb

Please sign in to comment.