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 и попробуйте!

Вдохновение

Спасибо, Тасио Медейрос и Тьяго Франка за отличную идею.