VueJS — как можно передать данные из slot-a в родительский компонент?

Question

[movsumlu]

всем привет,
как можно передать данные из slot-а (который является компонентом) в родительский компонент без emit-ов и store?

Comments

[Вадим]

Что значит "Данные из слота"? У слота нет данных. Есть у компонента, который отрисуется на месте слота.
Куда именно и какие данные Вы хотите передать?
От того компонента, который отрендерится вместо слота, в тот компонент, который этот слот содержит?
И как передать? В какой момент времени?

[movsumlu]

Вадим, в слоте-компоненте лежит результат computed-свойства и некоторые данные в data, которые я хочу их передать родителю для валидалии, не могу понять как это сделать без store и emit

[Ярослав Иванов]

IgorBydanov, валидируйте в слоте. Зачем родителю отдавать?

[Вадим]

IgorBydanov, Согласшусь что в целом звучит странно. Будто где-то у Вас проблема в архитектуре.
Но можно воспользоваться vue scoped slots и сделать так:

<!-- Компонент со слотом, в примере ниже это будет HelloWorld.vue -->
<slot :onSlotClick="sayHello"></slot>

А при использовании:

<HelloWorld>
  <button slot-scope="props" @click="props.onSlotClick">Сказать привет.</button>
</HelloWorld>

При нажатии на кнопку вызовется метод компонента, в котором был определён слот. То есть метод sayHello из компонента HelloWorld.

https://codesandbox.io/s/jolly-shape-5ouv8?file=/s...

[movsumlu]

Ярослав Иванов, спасибо, так и сделал

[movsumlu]

Вадим, спасибо большое, передалал, теперь все в слоте-компоненте

Answer 1

[Rsa97]

Никак. Данные передаются только от родителя потомку.
Но можно упростить возврат через emit, используя .sync и событие update:
https://medium.com/front-end-weekly/vues-v-model-d...

Answer 2

[Dmitry Barkowski]

https://ru.vuejs.org/v2/guide/components-slots.htm...
Используйте slot-props