Передать ссылку в слот по умолчанию в компоненте без рендеринга

Question

Я пытаюсь создать компонент без рендеринга в vue 3 и хочу передать ссылку в слот по умолчанию.

Когда я использую h функцию рендеринга, я могу просто передать ссылку:

      return h('div', {ref: someRef}); // works

Если я попытаюсь сделать то же самое со слотом по умолчанию, это не сработает:

      return slots.default({ ref: someRef}) // does not work
return slots.default({ someRef}) // also does not work

Есть ли способ сделать это без переноса слота по умолчанию в другой div или аналогичный?

Уже проверил документацию и другие ресурсы, но не смог найти никакого решения.

Answer 1

Прямой ответ

Да вернуть функцию из вашегоsetupкрюк!

      setup(_, slots) { 
  const someRef = ref()

  return () => slots.default({ ref: someRef })
}

1. ссылка на документы vue3
2. Документы vue3 для шаблона компонента без рендеринга

Контекстный ответ для тех, кто в разделе комментариев сомневается в шаблоне без рендеринга / без головы.

Да, иногда вы просто хотите безрендеринговую (или безголовую, как говорят дети в наши дни) оболочку для функциональности (логики), не ограничивая HTML, который могут использовать потребители.

Но для того, чтобы эта функциональность работала, компонент без рендеринга/безголового по-прежнему должен идентифицировать часть HTML-кода, который потребители отображают в слоте по умолчанию, чтобы, например, обеспечить функциональность, связанную с DOM.

У меня та же проблема при использовании этого шаблона, и я полагался на «хак»: передачу определенных атрибутов данных через область слота, которую потребители должны привязать к нужным элементам (не только корневому), а затем использовать старый добрыйdocument.querySelectorсхватить их

Я хорошо послужил мне в vue2, и я без проблем использовал его в производстве, но мне было интересно, если с новой динамикой:refатрибут vue3, мы можем сделать это по-другому: возможно, передав реактивныйrefпеременная, а затем выполняет простое назначение, и, по-видимому, это работает.

      <renderless #default="{ someRef }">
   <some-consumer-comp :ref="(el) => someRef.value = el" />
</renderless>

1. Вот демонстрация песочницы по-старому для vue 2
2. Вот демо-версия песочницы, новый способ для vue 3

Обратите внимание, что если вы хотите обрабатывать крайние случаи, такие как обработка условного рендеринга содержимого слота, вам, вероятно, потребуется проделать немного больше работы и добавить несколько наблюдателей.

Этот шаблон немного вышел из моды в наши дни, с введением vuecomposablesпоскольку вы можете абстрагировать логику вuseSomeFunctionalityи используйте его непосредственно на компоненте, который вы хотите, но он все еще действителен IMO.

Ваше здоровье!