Не пойму зачем в потомке нужен
:value="moduleValue", ведь изменение значения родителя происходит благодаря
$emit
Родитель:
<template>
<div class="app">
<div class="app__btns">
<my-select v-model="selectedSort" :options="sortOptions" />
</div>
</template>
<script>
export default {
data() {
return {
selectedSort: "",
sortOptions: [
{ value: "title", name: "По названию" },
{ value: "body", name: "По содержимому" },
],
};
},
};
</script>
<style>
</style>
Потомок:
<template>
<select :value="modelValue" @change="updateValue">
<option disabled value="">Выберите из списка</option>
<option v-for="option in options" :key="option.value" :value="option.value">
{{ option.name }}
</option>
</select>
</template>
<script>
export default {
name: "my-select",
props: {
modelValue: {
type: String,
},
options: {
type: Array,
default: () => [],
},
},
methods: {
updateValue(event) {
this.$emit("update:modelValue", event.target.value);
},
},
};
</script>
<style scoped></style>
Какой смысл в
:value="modelValue" , которое находится внутри
<select :value="modelValue" @change="updateValue"> , если связывание происходит и если его удалить? Т.е. удалить
:value="modelValue"
Связывание будет осуществляться за счет
this.$emit("update:modelValue", event.target.value);
и в родителе значение
selectedSortбудет изменяться, как положено.
Какой тут смысл в
:value="modelValue", , для чего оно - вот в чем вопрос.
Это пример с видеокурса на Ютубе.
Правильно я понимаю, что тут
:value = "moduleValue" необязателен?
Или вообще не нужен.
Спасибо за помощь!
