Vue.js
Automaty
Szukaj…
Uwagi
Ważny! Automaty po renderowaniu nie gwarantują kolejności pozycji dla automatów. Slot, który był pierwszy, po renderowaniu może mieć inną pozycję.
Korzystanie z pojedynczych gniazd
Pojedyncze gniazda są używane, gdy komponent potomny definiuje tylko jedno slot w swoim szablonie. Powyższy komponent page używa pojedynczego boksu do dystrybucji treści.
Przykład szablonu komponentu page używającego pojedynczego boksu znajduje się poniżej:
<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>
Aby zilustrować działanie automatu, możemy skonfigurować stronę w następujący sposób.
<page>
<p>This content will be displayed within the page component</p>
</page>
Rezultatem końcowym będzie:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
Jeśli nie kłaść żadnych przedmiotów pomiędzy page tagów e zamiast miał <page></page> my zamiast uzyskując następujące rezultaty, ponieważ nie jest domyślną zawartość między slot znaczników w page szablonu komponentu.
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
Co to są automaty?
Automaty oferują wygodny sposób dystrybucji treści z komponentu nadrzędnego do komponentu podrzędnego. Może to być dowolna treść - tekst, HTML lub nawet inne składniki.
Czasami pomocne może być myślenie o gniazdach jako o sposobie wstrzykiwania zawartości bezpośrednio do szablonu komponentu podrzędnego.
Szczeliny są szczególnie przydatne, gdy skład komponentu pod komponentem macierzystym nie zawsze jest taki sam.
Weźmy następujący przykład, w którym mamy komponent page . Zawartość strony może ulec zmianie w zależności od tego, czy na stronie wyświetla się np. Artykuł, post na blogu lub formularz.
Artykuł
<page>
<article></article>
<comments></comments>
</page>
Post na blogu
<page>
<blog-post></blog-post>
<comments></comments>
</page>
Formularz
<page>
<form></form>
</page>
Zauważ, jak może się zmienić zawartość komponentu page . Gdybyśmy nie użyli gniazd, byłoby to trudniejsze, ponieważ wewnętrzna część szablonu zostałaby naprawiona.
Pamiętaj: „Wszystko w szablonie nadrzędnym jest kompilowane w zakresie nadrzędnym; wszystko w szablonie podrzędnym jest kompilowane w zakresie podrzędnym”.
Korzystanie z nazwanych gniazd
Nazwane sekcje działają podobnie do pojedynczych sekcji, ale zamiast tego umożliwiają dystrybucję treści do różnych regionów w szablonie komponentu potomnego.
Weź komponent page z poprzedniego przykładu, ale zmodyfikuj jego szablon, aby wyglądał następująco:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
Korzystając ze składnika page , możemy teraz określić, gdzie umieszczana jest zawartość za pomocą atrybutu slot :
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
Powstała strona będzie:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
Jeśli slot jest określona bez name atrybutu następnie treści, który jest umieszczony w znaczniki składowych nie podając slot atrybutu jest umieszczony w tym gnieździe.
Zobacz przykład wielokrotnego wstawiania w oficjalnych dokumentach Vue.js.
Używanie automatów w Vue JSX z „babel-plugin-transform-vue-jsx”
Jeśli używasz VueJS2 i lubisz używać JSX wraz z nim. W tym przypadku, aby skorzystać ze slotu, poniżej znajduje się rozwiązanie z przykładem: this.$slots.default To prawie tak jak this.props.children w 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>
);
}
};