@Crone01

Как использовать useSlots().default() vue3 внутри script setup?

у меня есть условный компонент, внутри которого хранятся slot (далее в slot попадает другой компонент, имеющий пропсы)

мне необходимо использовать useSlots().default(), чтобы узнать их props и выполнить определенную логику

при запуске юнит тестов, вью ругается
Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

о какой рендер функции идет речь?

саму логику пишу используя синтаксис script setup

краткий пример компонента:
<template>
    <div>
            <slot></slot>
    </div>
</template>

<script setup lang="ts">
import {useSlots} from 'vue';
import type {Slot} from 'vue';

const slots = useSlots().default();
</script>
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae Куратор тега TypeScript
Тлен
о какой рендер функции идет речь?

render-function

Это более низкоуровневый вариант работы с vue, вместо использования <template>.(под капотом <template> компилируется в render-функцию)

Render-функцию можно возвращать из setup, можно класть в свойство render.
При script setup, можно сделать так:
<template>
  <div>
    <render/>
  </div>
</template>

<script setup lang="ts">
  import { h, useSlots } from 'vue'

  const slots = useSlots();
  const render = () => {
    return h('div', slots.default());
  };
</script>

Но не нужно в подавляющем большинстве случаев. Мешать всё в одну кучу - весьма опасно.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
30 янв. 2023, в 04:49
1500 руб./за проект
30 янв. 2023, в 04:49
1500 руб./за проект
30 янв. 2023, в 03:43
10000 руб./за проект