Как правильно в vue3 передать событие из дочернего компонента в родительский?

Question

[Andy Koshman]

Всем привет, есть 10 радиобатоннов и проблема заключается в том, что при клике например по 6 радиобатонну удаляются 7, 8, 9, 10 итерации по какой-то причине, не могу понять почему. Примерное описание что делаю: есть родительский компонент - ReviewsForm.vue и дочерний компонент RatingSelect.vue. Я передаю const rating = ref(10) из родительского в дочерний с помощью:rating="rating", в дочернем я инициализирую пропс и присваиваю его переменной selected здесь const selected = ref(props.rating). Далее я слежу за изменениями selected с помощью watch, определяю emit и передаю родителю rating здесь @setRating="rating = $event"

https://codesandbox.io/s/pedantic-thompson-hlnkbx?...

Родительский компонент:

<template>
  <form>
    <RatingSelect :rating="rating" @setRating="rating = $event" />
  </form>
</template>
<script setup>
import { ref, watch } from "vue";
import RatingSelect from "./RatingSelect.vue";

const rating = ref(10);

watch(rating, (newValue) => {
  console.log("newValue: ", newValue);
});
</script>

Дочерний компонент:

<template>
  <div>
    <ul class="rating">
      <li v-for="n in rating" :key="`rating-${n}`">
        <input
          type="radio"
          :id="`num${n}`"
          name="rating"
          :value="n"
          :checked="selected === n"
          v-model="selected"
        />
        <label :for="`num${n}`">{{ n }}</label>
      </li>
    </ul>
  </div>
</template>
  
  <script setup>
import { defineProps, defineEmits, ref, watch } from "vue";

const props = defineProps({
  rating: {
    type: Number,
    required: true,
  },
});

const selected = ref(props.rating);

const emit = defineEmits(["setRating"]);

watch(selected, (newValue) => {
  emit("setRating", newValue);
});
</script>

Comments

[Alex D]

defineProps и defineEmits являются макросами компилятора, которые можно использовать только внутри script setup. Их не нужно импортировать, они компилируются при script setup обработке.

Answer 1

[0xD34F]

<RatingSelect v-model="rating" />

const props = defineProps({
  modelValue: {
    type: Number,
    required: true,
  },
  maxRating: {
    type: Number,
    default: 10,
  },
});

const emit = defineEmits([ 'update:modelValue' ]);

const selected = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val),
});

<li v-for="n in maxRating">
  <label>
    <input type="radio" :value="n" v-model="selected">
    {{ n }}
  </label>
</li>

Comments

[Alex D]

0xD34F Можешь объяснить как здесь значение возвращается в родительский компонент. Просто сам счас с этим столкнулся и не хочу создавать вопрос так как вот он уже ответ здесь. Не понимаю как оно передается и как принимается в род.компоненте. Видно что апдейтит пропсы но не понятно как родитель принимает его.

[0xD34F]

Alex D, вы сейчас просите меня пересказать вам документацию. Делать этого я конечно же не буду. Предлагаю разобраться самостоятельно. Начать можете отсюда.