Vue.js Слоты

Компонент может на 100 % отвечать за генерацию своих выходных данных, как в этом случае:

Vue.component('user-name', {
  props: ['name'],
  template: '
Hi {{ name }}
'
})

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

Что такое слот? Это зарезервированное пространство в выводе вашего компонента, ожидающее заполнения.

Вы определяете слот, помещая <слот> в шаблон компонента:

Vue.component('user-information', {
  template: '
'
})

При использовании этого компонента любое содержимое, добавленное между открывающим и закрывающим тегом, будет добавлено внутри заполнителя слота:

  
Hi!
  

Если вы разместите какое-либо содержимое рядом с тегами <слот> , оно будет использоваться в качестве содержимого по умолчанию на случай, если ничего не будет передано.

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

Вот почему Vue предлагает нам именованные слоты .

Именованные слоты

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

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

Для удобства в этом примере я использую компонент страница один файл:

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

  

  
Page title
  
Page content

Есть удобная стенография, # :

  

  
Page title
  
Page content

Примечание: Vue 2.6 устарел атрибут слот в пользу v-слот и требует, чтобы он был добавлен в шаблон метка (в то время как слот может быть применен к любому тегу)

Ограниченные слоты

В слоте мы не можем получить доступ к данным, содержащимся в дочернем компоненте, от родительского.

Vue распознает этот вариант использования и предоставляет нам способ сделать это:

В родителе мы можем получить доступ к имени собаки, которое мы передали, используя:

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

Оригинал: “https://flaviocopes.com/vue-slots/”