[Vue] Подробное объяснение слота, слота, области действия слота и v-слота.

Vue.js

v-slot

что такое слот

слот, также известный какслот, который можно сравнить с подключаемой игровой консолью FC.Игровая консоль (подкомпонент) предоставляет слот для карты (слот), чтобы пользователи могли вставлять различные игровые магнитные полосы (пользовательский контент), а игровой автомат считывает и загружает игры на магнитной полосе.
Слот Vue, даКусок HTML-шаблона для компонента, этот шаблонПредоставляется пользователем компонента, родительский компонент. Можно сказать, что это интерфейс, предоставляемый дочерним компонентом, который позволяет родительскому компоненту передавать пользовательский контент.

FC-slot

Роль слота

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

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

Использование слота можно разделить на три категории, а именноСлоты по умолчанию, именованные и ограниченные слоты
В дочернем компоненте:

  • для слота<slot>Метка для определения позиции рендеринга, которая содержит резервное содержимое, если родительский компонент не передает содержимое.
  • именованный слотиспользоватьnameАтрибут для представления имени слота, не передаваемого в качестве слота по умолчанию
  • слот с прицеломПривяжите свойства области, чтобы передать информацию о дочернем компоненте родительскому компоненту для использования.Эти свойства будут прикреплены к объекту, принятому областью слота родительского компонента.
// Child.vue
<template>
  <div>
    <main>
    <!-- 默认插槽 -->
        <slot>
          <!-- slot内为后备内容 -->
          <h3>没传内容</h3>
        </slot>
    </main>

    <!-- 具名插槽 -->
    <header>
        <slot name="header">
          <h3>没传header插槽</h3>
        </slot>
    </header>

    <!-- 作用域插槽 -->
    <footer>
        <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
        </slot>
    <footer>
  </div>
</template>

<style scoped>
div{
 border: 1px solid #000;  
}
</style>

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

  • слот по умолчаниюЕсли это так, вы можете напрямую написать содержимое в теге подкомпонента.
  • именованный слотоснован на слоте по умолчанию плюсslotсвойство, значением является слот дочернего компонентаnameзначение атрибута
  • слот с прицеломчерезslot-scopeПолучите информацию о дочернем компоненте для использования в содержимом. Здесь вы можете использовать синтаксис деструктурирования, чтобы напрямую получить желаемые свойства.
// Parent.vue
<child>
  <!-- 默认插槽 -->
  <div>默认插槽</div>  
  <!-- 具名插槽 -->
  <div slot="header">具名插槽header</div>
  <!-- 作用域插槽 -->
  <div slot="footer" slot-scope="slotProps">
    {{slotProps.testProps}}
  </div>
</child>

Результат рендеринга

slot-demo

v-slot

В vue2.6 вышеуказанный API был мягко заброшен (3.0 официально заброшен), заменен встроенным v-слотом инструкций, который может быть сокращен как [#]

Использование подкомпонентов остается прежним, в родительском компоненте

  • slotАтрибут устарел, именованные слоты передают аргументы директивыv-slot:插槽名передается в виде , который можно упростить как#插槽名.
  • slot-scopeсвойство устарело, слот с заданной областью действия переданv-slot:xxx="slotProps"slotProps для получения исходящих свойств дочернего компонента
  • v-slotсвойства могут быть только<template>используется на [Когда только слот по умолчанию] можно использовать в тегах компонентов
//Parent
<template>
  <child>
   <!--默认插槽-->
   <template v-slot>
     <div>默认插槽</div>
   </template>
   <!--具名插槽-->
   <template #header>
     <div>具名插槽</div>
   </template>
   <!--作用域插槽-->
   <template #footer="slotProps">
     <div>
      {{slotProps.testProps}}
     </div>
   </template>
  <child>
</template>

Расширенное использование:

  1. Его также можно получить путем разрушенияv-slot={user},
    также можно переименоватьv-slot="{user: newName}"и определить значения по умолчаниюv-slot="{user = '默认值'}"
  2. Имена слотов могут быть динамически измененыv-slot:[slotName]

Уведомление:

  1. Имя слота по умолчаниюdefault, вы можете опустить значение по умолчанию и написать напрямуюv-slot,
    Когда он обозначается аббревиатурой #, параметр нельзя опустить, и он записывается как#default(Это одинаково для всех инструкций, v-bind, v-on)
  2. Когда несколько слотов смешиваются, v-slot не может опускать значения по умолчанию.

Как работают слоты с ограниченной областью действия

Слот — это, по сути, функция, которая возвращает VNode.В общем, компоненты Vue должны отображаться на странице через
template >> render function >> VNode >> DOMпроцесс. Суть монтирования компонента заключается в выполнении функции рендеринга для получения VNode, а свойства data/props/computed предоставляют источники данных для VNode.

До 2.5, если это обычный слотнепосредственно VNodeВ форме и если это слот с областью действия, поскольку дочернему компоненту необходимо получить доступ к данным дочернего компонента в родительском компоненте, поэтому родительский компонент являетсяневыполненная функция (slotScope) => return h('div', slotScope.msg), принимает параметр slotProps дочернего компонента и вызывает эту функцию для передачи данных, когда дочерний компонент отображает экземпляр.

После 2.6 два слились, и нормальный слот тоже стал функцией, но параметров не принимал.

Сокращенная схема:

outline

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

Ссылаться на

документация vue — слоты
Как понять слоты в компонентах Vue.js?
Происхождение v-слота — RFC

Категории