Vue.js - Распространение контента с использованием слотов
tl;dr;
Использование слотов позволит вам «вставлять» контент в компонент Vue.js в зависимости от его контекста. Идея проста, но действенна.
Это процесс, называемый распределением контента (или« включением , если вы знакомы с Angular). Vue.js реализует API распространения контента, который смоделирован по образцу текущего проекта спецификации веб-компонентов, с использованием специального элемента
<slot>
, который служит точками распространения исходного контента ». - vuejs.org
Давайте создадим модальный компонент, где мы сможем повторно использовать его в любом приложении, которое мы создаем.
Modal.vue
<!-- Modal Component --> <template> <div class="modal"> <div class="modal-header"> <slot name="header"></slot> </div> <div class="modal-body"> <slot name="body"></slot> </div> <div class="modal-footer"> <slot name="footer"></slot> <slot>Hello! I'm kinda a "catch"! I will popup when nobody else does.</slot> </div> </div> </template>
Итак ... Как я могу это использовать?
<modal> <span slot="header">Eu sou um header!</span> <span slot="body">Eu sou um body!</span> <span slot="footer">Eu sou um footer!</span> </modal>
Легкий! Результатом приведенного выше кода (после того, как Vue сотворит чудеса) будет:
<div class="modal"> <div class="modal-header"> <span slot="header">Hello! I'm a modal header!</span> </div> <div class="modal-body"> <span slot="body">Hello! I'm a modal body!</span> </div> <div class="modal-footer"> <span slot="footer">Hello! I'm a modal footer!</span> </div> </div>
Помнить
Приведенный ниже оператор появится в результате только в том случае, если не будет слота для вызова ИЛИ введен «неопределенный» слот.
<!-- ... --> <slot>Hello! I'm kinda a "catch"! I will popup when nobody else does.</slot> <!-- ... -->
Живой пример
Просто ознакомьтесь с этим JSFiddle и попробуйте!
Вдохновение
Спасибо, Тасио Медейрос и Тьяго Франка за отличную идею.