Фото від Eric Han на Unsplash
Передумови
- Переконайтеся, що у вас встановлений Node.js версії 18.3+
- Потрібно створити Vue додаток, слідуючи цьому посібнику.
Вступ
Якщо ви хочете передати шаблон від батьківського компонента до дочірнього, ви можете використати слоти.
У ChildComponent
У файлі ChildComponent.vue (якщо ви його ще не створили, створіть), напишіть наступний код:
ChildComponent
Нічого, крім ``. Це заповнювач, в який буде відображено шаблон від батьківського компонента.
У AppComponent
У файлі App.vue, напишіть наступне:
AppComponent
Ви бачите, що ми не просто викликаємо ChildComponent; ми буквально вміщаємо
Запуск проекту
Ви побачите текст “Hello World!”, але він буде відображений за допомогою Vue слота.
Резервний контент
Якщо ви хочете встановити резервний контент, який буде відображений, якщо батьківський компонент не передасть шаблон, ви можете написати це так:
Для тесту не передавайте жодного шаблону з батьківського компонента, і ви побачите “No Header Text”.
Кілька слотів
Ви можете визначити кілька слотів ось так:
ChildComponent
Ви бачите, що ми додали ще один слот з атрибутом name.
Щоб викликати його, ви можете використовувати імена слотів, як показано нижче:
AppComponent
На рядку 4 ми використовуємо `...
Перекладено з: Slots