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

Question

[Алексей]

Не совсем понимаю как использовать $emit для передачи от дочернего родителю
нужно передать kinds (v-model)

ДОЧЕРНИЙ
  </div>
      <div class="shipment-kind__content__rightBlock">
        <div class="option" v-for="kind in kind_shipment" :key="kind.id">
          <input type="radio" :id="kind.id" :value="kind.id" v-model="kinds" />
          <label class="radio-right" :for="kind.id">&nbsp;{{ kind.kind }}</label>
        </div>
      </div>

РОДИТЕЛЬСКИЙ

 <div style="display: flex">
    <div style="width: 80%; ">
      <b-card no-body style="margin-left: -5% !important; height: 90vh !important">
        <b-tabs pills card vertical style="height: 90vh !important">
          <b-tab title="Станции отправления/назначения" active>
            <b-card-text>
              <Stations />
            </b-card-text>
          </b-tab>
          <b-tab title="Отправка">
            <b-card-text>
              <Shipment />
            </b-card-text>
          </b-tab>
          <b-tab title="Груз">
            <b-card-text>
              <Cargo />
            </b-card-text>
          </b-tab>
          <b-tab title="Вагон">
            <b-card-text>
              <Wagon />
            </b-card-text>
          </b-tab>
        </b-tabs>
      </b-card>
    </div>
    <div class="result">
        <p >СЮДА ЗНАЧЕНИЕ ПЕРЕМЕННОЙ ДОЧЕРНЕГО КОМПОНЕНТА</p>
    </div>
</div>

Comments

[WapSter]

Толком кода нет. Какая версия Vue. В документации все предельно ясно описано и как создать двустороннее связывание, и как просто передавать значения через emmit наружу

Answer 1

[Антон Антон]

А вот тут что не понятно? https://vuejs.org/guide/components/v-model.html
нужно в родительском создать переменную, в дочернем model-value и emit. В простейших случаях в дочернем компоненте можно как-то так (синтаксис script setup):

const props = defineProps({ modelValue: Object })
const emit = defineEmits(['update:modelValue'])

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