Зачем тут :value и почему все работает без него?

Question

[konst34]

Не пойму зачем в потомке нужен :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" необязателен?
Или вообще не нужен.

Спасибо за помощь!

Comments

[Вадим]

Ну так а если родитель диктует значение по умолчанию, то как вы за дадите выбранную опцию? Если данные уже были внесены ранее и это редактирование значения, а не первичное задание значения?

[RAX7]

Попробуй в selectedSort: "", подставить "title", затем "body" и посмотри как будет меняться select элемент. Может так станет понятней зачем оно нужно.

Answer 1

[Вячеслав]

:value = "moduleValue" - выступает в роли default-а