Автор/Yunhuang Cup dump
написать впереди
Документация по слотам в vue очень короткая, а язык очень лаконичный.Кроме того, частота и порядок использования общих опций, таких как методы, данные и вычисляемые, отличаются, что может привести к первому контакту со слотами. Разработчики многих людей склонны к идее «Забудьте об этом, вернитесь и изучите, в любом случае, вы уже можете писать базовые компоненты», поэтому они закрыли документацию по Vue.
Фактически, концепция слота очень проста, следующее разделено на три части. Эти три части также написаны в порядке документации Vue.
Прежде чем вводить эти три части, одноклассники, которые не подвергались воздействию слота, будут сделаны простая концепция для слота:Слот, то есть слот, это кусок HTML-шаблона для компонента.Отображается этот шаблон или нет, и как он отображается, определяется родительским компонентом.Фактически, здесь указаны две основные проблемы слота.показать не показатьа такжекак отображать.
Так как слот является шаблоном, то для любого компонента, с точки зрения типа шаблона, его фактически можно разделить нашаблон без слотаа такжеШаблон слотаДве категории. Шаблон без слота относится кHTML-шаблон, такие как 'div, span, ul, table', отображение и скрытие шаблонов, не являющихся слотами, и способ отображения управляются самим компонентом; шаблон слота - это слот, который представляет собой пустую оболочку, потому что его отображение и скрытие и окончательный вариант того, какой HTML-шаблон используется для отображения, контролируется родительским компонентом.Однако позиция отображения слота определяется самим дочерним компонентом, где слот прописан в шаблоне компонента, а где в дальнейшем будет отображаться шаблон, переданный от родительского компонента.
один слот | слот по умолчанию | анонимный слот
Сначала один слот,один слотЭто официальное название vue, но его также можно назвать слотом по умолчанию или, в отличие от именованного слота, мы можем назвать его анонимным слотом. Потому что ему не нужно устанавливать атрибут имени.
Один слот может быть размещен в любом месте компонента, но, как и его имя, в компоненте может быть только один слот этого типа. Соответственно, именованных слотов может быть много, лишь бы имена (атрибуты имен) были разными.
Пример показан ниже.
Родительский компонент:
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
</child>
</div>
</template>
Сборка:
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
В этом примере, поскольку родительский компонент записывает в него HTML-шаблон, дочерний компонентанонимный слотШаблон выглядит следующим образом. То есть используется анонимный слот подкомпонента, который используется следующим шаблоном.
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
Окончательный результат рендеринга показан на рисунке:
注：所有demo都加了样式，以方便观察。其中，父组件以灰色背景填充，子组件都以浅蓝色填充。
именованный слот
Анонимный слот не имеет атрибута имени, поэтому это анонимный слот.Тогда, если слот добавляется с атрибутом имени, он становится именованным слотом. Именованные слоты могут появляться в компоненте N раз в разных позициях. В следующем примере один с двумяименованный слота такжеодин слоткомпонент, эти три слота отображаются родительским компонентом с тем же набором стилей css, разница в том, что содержимое немного отличается.
Родительский компонент:
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl" slot="up">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
<div class="tmpl" slot="down">
<span>菜单-1</span>
<span>菜单-2</span>
<span>菜单-3</span>
<span>菜单-4</span>
<span>菜单-5</span>
<span>菜单-6</span>
</div>
<div class="tmpl">
<span>菜单->1</span>
<span>菜单->2</span>
<span>菜单->3</span>
<span>菜单->4</span>
<span>菜单->5</span>
<span>菜单->6</span>
</div>
</child>
</div>
</template>
Сборка:
<template>
<div class="child">
// 具名插槽
<slot name="up"></slot>
<h3>这里是子组件</h3>
// 具名插槽
<slot name="down"></slot>
// 匿名插槽
<slot></slot>
</div>
</template>
Результаты ФИЖ показывают:
Как видите, родительский компонент связывает именованный слот с атрибутом слота в html-шаблоне. Шаблоны HTML без атрибута слота по умолчанию связывают анонимные слоты.
слот с заданной областью | слот с данными
Наконец, есть наши слоты с ограниченной областью действия. Это немного сложнее понять. Официально он называется слотом с прицелом, фактически, по сравнению с двумя предыдущими слотами, мы можем назвать его слотом с данными. Что значит, первые два прописаны в шаблоне компонента
匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>
ноТребования к слоту Scope, привязка данных к слоту. То есть вы должны написать что-то вроде этого.
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
Как мы уже говорили ранее, будет ли слот окончательно отображен, зависит от того, написал ли родительский компонент шаблон под дочерним, как показано ниже.
<child>
html模板
</child>
Если написано, то слот должен что-то отображать в браузере, дело в том, как должен выглядеть HTML, если не написано, то слот — это пустая оболочка без ничего. ОК,говорим что есть html шаблон,то есть родительский компонент будет вставлять шаблон в дочерний компонент.Какой стиль вставляется?Это определяется html+css родительского компонента,но стиль в этот набор Что насчет содержания?
Поскольку слот с заданной областью привязан к набору данных, родительский компонент может его использовать. Итак, ситуация становится такой: за стилем родительского компонента остается последнее слово, но контент может отображать привязку слота дочернего компонента.
Давайте сравним разницу между слотом с ограниченной областью действия, одиночным слотом и именованным слотом. Поскольку одиночный слот и именованный слот не привязаны к данным, шаблон, предоставляемый родительским компонентом, обычно включает в себя как стиль, так и содержимое. Вышеупомянутый пример , текст, который вы видите, «Меню 1» и «Меню 2» — это содержимое, предоставляемое самим родительским компонентом, а слот области — родительский компонент должен предоставить только набор стилей (если слот области используется для привязки учитывая данные).
В следующем примере вы можете видеть, что родительский компонент предоставляет три стиля (flex, ul и прямое отображение), но ни один из них не предоставляет данные.Данные используют массив, ограниченный самим слотом дочернего компонента (тот, который массив кучи имена).
Родительский компонент:
<template>
<div class="father">
<h3>这里是父组件</h3>
<!--第一次使用：用flex展示数据-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{{item}}</span>
</div>
</template>
</child>
<!--第二次使用：用列表展示数据-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{{item}}</li>
</ul>
</template>
</child>
<!--第三次使用：直接显示数据-->
<child>
<template slot-scope="user">
{{user.data}}
</template>
</child>
<!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
<child>
我就是模板
</child>
</div>
</template>
Сборка:
<template>
<div class="child">
<h3>这里是子组件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
Результат показан на рисунке:
github
Вышеупомянутые три демонстрации размещены на GitHub, и вы можете получить их, если они вам нужны. Он очень удобен в использовании и представляет собой проект, основанный на vue-cli.
наконец
Если эта статья поможет вам понять, что такое слот и прицел-слот, пожалуйста, не скупитесь на поднятые вверх большие пальцы. Программирование важнее на практике, торопитесь и действуйте!