Использование слота Vue (легко понять)

Vue.js

Поскольку в 2.6.0,именованный слота такжеслот с прицеломвводит новый унифицированный синтаксис (т.е.v-slotинструкция). он заменяетslotа такжеslot-scope, а сейчас интернет говорит о каких-то старых версиях контента, в официальных документах разобраться не просто, поэтому я составил статью про использование слотов

Популярное понимание слота состоит в том, чтобы «занять яму», которая занимает позицию в шаблоне компонента. Когда используется метка компонента, содержимое метки компонента автоматически заполняет дыру (замените шаблон компонента в шаблоне компонента).slotМесто нахождения)
и может использоваться в качестве выхода для распространения распределенного контента

слот контента

определить два компонентаhome.vue,test.vue
затем вhome.vueссылка в компонентеtest.vueкомпоненты

Слоты могут содержать обычный текст

//home.vue
<test>
     Hello Word
</test>

//test.vue
<a href="#">
	 <slot></slot>
</a>

Когда компонент визуализируется,<slot></slot>Он будет замененHello Word

Слоты также могут содержать любой код шаблона, в том числе HTML

В твоемindex.htmlпредставлятьFont AwesomeСтиль значка может напрямую использовать значок внутри.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

//home.vue
<test>
    <!-- 添加一个 Font Awesome 图标 -->
    <span class="fa fa-user"></span>
    Hello Word
</test>

Добавьте другие компоненты в слот

//home.vue
<test>
    <!-- 添加一个图标的组件 -->
    <font-awesome-icon></font-awesome-icon>
    Hello Word
</test>

если<test>не содержит<slot>элемент, любое содержимое между начальным и конечным тегами компонента будет удалено.

Использовать данные в слотах

Слоты имеют доступ к тем же свойствам экземпляра (то есть к той же «области действия»), что и в других частях шаблона, но не<test>объем

//home.vue
<test>
	//插槽可以获取到home组件里的内容
	Hello {{enhavo}}
</test>

data(){
	return{
		enhavo:'word'
	}
}

//home.vue
//这里是获取不到name的，因为这个值是传给<test>的
<test name='you'>
    Hello {{name}}
</test>

правило:
Все в родительском шаблоне компилируется в родительской области, все в дочернем шаблоне компилируется в дочерней области.

слот резервного контента (контент по умолчанию)

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

//test.vue
//在slot插槽里设置默认内容 Submit
<button>
  <slot>Submit</slot>
</button>

существуетhome.vueиспользовать его напрямуюtest.vueследующим образом:

//home.vue
<test></test>

Затем будет отображаться последний заданный контент по умолчанию Submit.

<button>
   Submit
</button>

Что, если мы предоставим контент?

//home.vue
<test>按钮</test>

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

<button>
   按钮
</button>

именованный слот

Иногда нам нужен один компонентнесколько слотов

Так что делать? Для такой ситуации,<slot>Элементы имеют особое свойство:name, эту функцию можно использовать дляопределить дополнительные слоты

<div>
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

В это время мы можем использоватьnameАтрибуты

<div>
  <header>
    <slot name="header"></slot>
  </header>
  
  <main>
    <slot></slot>
  </main>
  
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

если<slot>Безnameимущество, то егоnameПо умолчаниюdefault
Предоставляя контент в именованный слот, мы можем<template>использовать на элементахv-slotдирективу и указать ее имя в качестве параметра

<div>
   <template v-slot:header>
    <h1>Here might be a page title</h1>
   </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here some contact info</p>
  </template>
</div>

Сейчас<template>Все в элементе будет передано в соответствующий слот. Все, что не обернутоv-slotиз<template>Содержимое считается содержимым слота по умолчанию.

Если вы хотите быть более конкретным, то установите содержимое тела в слотеname="default", а затем оберните вышеуказанное

<template v-slot:default>
	<p>A paragraph for the main content.</p>
	<p>And another one.</p>
</template>

Примечание:v-slotможно добавить только в<template>on, (есть только одно исключение, о котором будет рассказано ниже)

слот с прицелом

Выше было сказано,Слоты имеют доступ к тем же свойствам экземпляра (то есть к той же «области действия»), что и в других частях шаблона, но не<test>объем

Если вы хотите посетить<test>Что насчет прицелов?
Привязываем контент, который нужно передать<slot>, а затем в родительском компоненте используйтеv-slotУстановите значение, чтобы определить имя слота, который мы предоставляем:

//test.vue
<div>
	<!-- 设置默认值：{{user.lastName}}获取 Jun -->
	<!-- 如果home.vue中给这个插槽值的话，则不显示 Jun -->
	<!-- 设置一个 usertext 然后把user绑到设置的 usertext 上 -->
	<slot v-bind:usertext="user">{{user.lastName}}</slot>
</div>

//定义内容
data(){
  return{
	user:{
	  firstName:"Fan",
	  lastName:"Jun"
	}
  }
}

затем вhome.vueПолучите переданное значение в:

//home.vue
<div>
  <test v-slot:default="slotProps">
    {{slotProps.usertext.firstName}}
  </test>
</div>

Таким образом, вы можете получитьtest.vueЗначение, переданное компонентом

связаны в<slot>Атрибуты элементов называются слотами.prop. В родительском компоненте мы можем использоватьv-slotУстановите значение, чтобы определить имя реквизита слота, который мы предоставляем, и используйте его напрямую.

Сокращенный синтаксис для эксклюзивного слота по умолчанию

В приведенном выше случае, когда предоставляется только слот по умолчанию, метка компонента может использоваться в качестве шаблона для слота. Таким образом, мы можем поставитьv-slotнепосредственно на компоненте

Этот способ записи также может быть проще, потому что нет параметраv-slotпредполагается, что это слот по умолчанию, поэтому приведенный выше код также можно упростить:

<div>
  <!-- 可以把 :default 去掉，仅限于默认插槽 -->
  <test v-slot="slotProps">
    {{slotProps.usertext.firstName}}
  </test>
</div>

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

<div>
  <!-- 可以把 :default 去掉，仅限于默认插槽 -->
  <test v-slot="slotProps">
    {{slotProps.usertext.firstName}}
    <!-- 无效，会警告 -->
    <template v-slot:other="otherSlotProps">
      slotProps is NOT available here
    </template>
  </test>
</div>

пока он появляетсянесколько слотов, всегда используйте полный<template>синтаксис:

<test>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</test>

Разрушение слота Prop

Поскольку внутренняя работа слотов с областью действия заключается в том, чтобы обернуть содержимое вашего слота в функцию, которая принимает один аргумент
это означаетv-slotФактически значением может быть любое выражение JS, которое можно использовать в качестве параметра в определении функции.

Так было написано так:

<div>
  <test v-slot="slotProps">
    {{slotProps.usertext.firstName}}
  </test>
</div>

Вы также можете написать:

<div>
  <test v-slot={usertext}>
    {{usertext.firstName}}
  </test>
</div>

Это позволяет для очистительного шаблона, особенно если слот обеспечивает несколькоpropкогда. он тоже включаетсяpropПереименование и другие возможности,

Например, вы можете переименовать пользовательский текст в человека:

<div>
  <test v-slot={usertext:person}>
    {{person.firstName}}
  </test>
</div>

Можно даже определить запасной контент (контент по умолчанию) для случаев, когда контент по умолчанию может использоваться, когда слот не имеет значения:

<div>
  <test v-slot="{usertext={firstName:'Yang'}}">
    {{usertext.firstName}}
  </test>
</div>

Динамическое имя слота (новое в версии 2.6.0)

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

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

Аббревиатура именованных слотов (новое в версии 2.6.0)

а такжеv-onа такжеv-bindТакой же,v-slotБывают и аббревиатуры, т.е. ставить все перед параметром(v-slot:)Заменить символ#. Напримерv-slot:headerможно переписать как#header:

Изначально было написано так:

<div>
   <template v-slot:header>
    <h1>Here might be a page title</h1>
   </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here some contact info</p>
  </template>
</div>

Теперь это можно записать так:

<div>
   <template #header>
    <h1>Here might be a page title</h1>
   </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here some contact info</p>
  </template>
</div>

Примечание. Эта команда, как и другие команды, доступна только в том случае, если она имеет параметры

Следующая форма написания неверна:

<test #="{ usertext }">
  {{ usertext.firstName }}
</test>

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

<test #default="{ usertext }">
  {{ usertext.firstName }}
</test>

Другие примеры

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

Например, мы хотим реализовать<todo-list>Компонент, который представляет собой список и содержит логику макета и фильтрации:

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

Мы можем поставить каждыйtodoкак слот для родительского компонента, чтобы управлять им через родительский компонент, а затемtodoкак слотpropСвязывать:

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    <!--
    我们为每个 todo 准备了一个插槽，
    将 `todo` 对象作为一个插槽的 prop 传入。
    -->
    <slot name="todo" v-bind:todo="todo">
      <!-- 后备内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

Теперь, когда мы используем<todo-list>компонента, мы можем определить другую задачу<template>В качестве альтернативы данные могут быть получены из узлов:

<todo-list v-bind:todos="todos">
  <template v-slot:todo="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </template>
</todo-list>

Что касается брошенныхslotа такжеslot-scopeОсобенности, я не буду здесь подробно останавливаться, если вам интересно разобраться, обратитесь к официальной документации

Пока-пока

@_@

Категории