Как использовать слот в Svelte

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

Что такое слоты в Svelte?

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

Это содержимое может быть обычным текстом, HTML-разметкой или другим элементом Svelte. Работа со слотами позволяет создавать очень гибкие и настраиваемые компоненты, подходящие для различных целей.

Создайте базовые слоты

Чтобы создать слоты в Svelte, используйте компонент slot в шаблоне компонента. Слот — это заполнитель для содержимого, которое вы передаете из родительского элемента. По умолчанию в этом слоте будет отображаться любой контент, перемещенный в него.

Вот пример того, как создать базовый слот:

Это дочерний компонент

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

Чтобы передать содержимое из родительского компонента в дочерний компонент, вы сначала импортируете дочерний компонент в родительский компонент. Затем вместо использования самозакрывающегося тега для отображения дочернего элемента используйте открывающий и закрывающий тег. Наконец, в теге компонента напишите содержимое, которое вы хотите передать из родительского компонента в дочерний.

Например:

Это родительский компонент. Это сообщение от родительского компонента.

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

Вот как вы можете использовать резервный контент:

Это дочерний компонент. Резервный контент.

Этот блок кода предоставляет текст «Резервный контент» в качестве резервного контента для слота дисплея, если родительский компонент не имеет контента.

Передача данных через слоты с помощью слота

Svelte позволяет передавать данные в слоты, используя реквизиты слотов. Вы используете реквизиты слота в ситуациях, когда хотите передать некоторые данные из дочернего компонента во включаемый контент.

Например:

Это дочерний компонент

В приведенном выше блоке кода показан компонент Svelte. В теге сценария вы объявляете переменную message и присваиваете текст «Hello Parent Component!» для этого. Вы также передаете переменную сообщения в свойство сообщения слота. Это делает данные сообщения доступными для родительского компонента, когда он вводит контент в это место.

Это родительский компонент. Дочерний компонент говорит: {message}

Синтаксис let:message позволяет родительскому компоненту получить доступ к свойству слота сообщения, предоставленному дочерним компонентом. Переменная сообщения тега div — это данные из свойства сообщения слота.

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

Это дочерний компонент

В корневом компоненте:

Это родительский компонент. Имя пользователя: {firstName} {lastName}.

Работа с именованными слотами

Вы можете использовать именованные слоты, если хотите переместить несколько слотов внутри компонента. Именование упрощает управление слотами, поскольку вы можете дать каждому слоту уникальное имя. С помощью именованных слотов вы можете создавать сложные компоненты с разной компоновкой.

Чтобы создать именованный слот, передайте атрибут name элементу slot:

Это дочерний компонент

Заголовки:

Нижний колонтитул:

В этом примере у вас есть два именованных слота: слоты верхнего и нижнего колонтитула. Используя это свойство слота, вы можете передавать контент в каждый слот из родительского компонента.

Например:

Это родительский компонент. Он будет передан в слот заголовка. Это будет передан в слот нижнего колонтитула.

Этот код показывает, как использовать атрибут slot для передачи содержимого в именованный слот. В первом теге span вы передаете атрибут slot со значением заголовка. Это гарантирует, что текст тега span появится в слоте заголовка. Аналогично, текст в теге span со значением атрибута нижнего колонтитула слота появится в слоте нижнего колонтитула.

Что такое переадресация слотов?

Переадресация слотов — это функция в Svelte, которая позволяет передавать контент из родительского компонента через оболочку в дочерний компонент. Это полезно в ситуациях, когда вы хотите переместить контент из несвязанных компонентов.

Вот пример того, как использовать переход слота: сначала создайте дочерний элемент:

Это дочерний компонент

Затем создайте окружающий элемент:

В этом блоке кода вы передаете слот с другим именем в слот сообщений дочернего компонента.

Затем в родительском компоненте напишите код:

Это родительский компонент Это из родительского компонента

В приведенной выше структуре содержимое «Это из родительского компонента» передается через компонент-оболочку непосредственно в дочерний компонент благодаря слоту WrapperMessage в окружающем компоненте.

В целом, слоты — это мощная функция в Svelte, позволяющая создавать многократно используемые и настраиваемые компоненты. Надеюсь, эта статья поможет вам узнать, как использовать слоты в Svelte.