Vue.js
игровые автоматы
Поиск…
замечания
Важный! Слоты после рендера не гарантируют порядок позиций для слотов. Слот, который был первым, может иметь другую позицию после рендера.
Использование отдельных слотов
Отдельные слоты используются, когда дочерний компонент определяет только один slot в своем шаблоне. Компонент page выше использует один слот для распространения контента.
Пример шаблона компонента page , использующего один слот, приведен ниже:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<slot>
This will only be displayed if there is no content
to be distributed.
</slot>
</body>
</html>
Чтобы проиллюстрировать, как работает слот, мы можем настроить страницу следующим образом.
<page>
<p>This content will be displayed within the page component</p>
</page>
Конечным результатом будет:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
Если бы мы не помещали что-либо между тегами page вместо этого вместо <page></page> мы получили бы следующий результат, так как в <page></page> компонента page есть содержимое по умолчанию между тегами slot .
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
Что такое слоты?
Слоты предлагают удобный способ распространения контента из родительского компонента в дочерний компонент. Этот контент может быть любым из текста, HTML или даже других компонентов.
Иногда бывает полезно подумать о слотах, как о средствах инъекции контента непосредственно в шаблон дочернего компонента.
Слоты особенно полезны, когда состав компонентов под родительским компонентом не всегда одинаковый.
Возьмем следующий пример, где у нас есть компонент page . Содержимое страницы может меняться в зависимости от того, отображается ли эта страница, например, статья, сообщение в блоге или форму.
Статья
<page>
<article></article>
<comments></comments>
</page>
Сообщение блога
<page>
<blog-post></blog-post>
<comments></comments>
</page>
форма
<page>
<form></form>
</page>
Обратите внимание, как содержимое компонента page может измениться. Если бы мы не использовали слоты, это было бы сложнее, поскольку внутренняя часть шаблона была бы исправлена.
Помните: «Все в родительском шаблоне скомпилировано в родительской области: все в дочернем шаблоне скомпилировано в области содержимого».
Использование именованных слотов
Именованные слоты работают аналогично отдельным слотам, но вместо этого позволяют распространять контент в разных регионах в шаблоне дочернего компонента.
Возьмите компонент page из предыдущего примера, но измените его шаблон, чтобы он выглядел следующим образом:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
При использовании компонента page мы можем теперь определить, где содержимое помещено через атрибут slot :
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
Результатом будет страница:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
Если slot определен без name атрибута тогда любое содержимое , которое находится в пределах компонентов тегов не задающих в slot атрибут будет помещен в этот слот.
См. Пример множественной вставки в официальных документах Vue.js.
Использование слотов в Vue JSX с помощью 'babel-plugin-transform-vue-jsx'
Если вы используете VueJS2 и хотите использовать JSX вместе с ним. В этом случае, чтобы использовать слот, решение с примером ниже. Мы должны использовать this.$slots.default Это почти как this.props.children в React JS.
Component.js:
export default {
render(h) { //eslint-disable-line
return (
<li>
{ this.$slots.default }
</li>
);
}
};
ParentComponent.js
import Component from './Component';
export default {
render(h) { //eslint-disable-line
return (
<ul>
<Component>
Hello World
</Component>
</ul>
);
}
};