Vue.js
Des fentes
Recherche…
Remarques
Important! Les emplacements après rendu ne garantissent pas l'ordre des positions pour les emplacements. Slot, qui était le premier, peut avoir une position différente après le rendu.
Utiliser des slots individuels
Les emplacements uniques sont utilisés lorsqu'un composant enfant définit uniquement un slot dans son modèle. Le composant de page ci-dessus utilise un seul emplacement pour distribuer le contenu.
Un exemple de la page du modèle du composant à l' aide d' une seule fente est ci - dessous:
<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>
Pour illustrer le fonctionnement de la machine à sous, nous pouvons configurer une page comme suit.
<page>
<p>This content will be displayed within the page component</p>
</page>
Le résultat final sera:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
Si nous ne mettons rien entre la page par balises INSTEAD avaient <page></page> nous cédons à la place le résultat suivant car il est contenu par défaut entre les slot balises dans la page par modèle des composants.
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
Que sont les slots?
Les emplacements offrent un moyen pratique de distribuer du contenu d'un composant parent à un composant enfant. Ce contenu peut être n'importe quoi, du texte, du HTML ou même d'autres composants.
Il peut être utile parfois de considérer les slots comme un moyen d’injecter du contenu directement dans le modèle d’un composant enfant.
Les emplacements sont particulièrement utiles lorsque la composition du composant sous le composant parent n'est pas toujours la même.
Prenons l'exemple suivant où nous avons un composant de page . Le contenu de la page peut changer selon que cette page affiche par exemple un article, un article de blog ou un formulaire.
Article
<page>
<article></article>
<comments></comments>
</page>
Blog Post
<page>
<blog-post></blog-post>
<comments></comments>
</page>
Forme
<page>
<form></form>
</page>
Notez comment le contenu du composant de page peut changer. Si nous n'utilisions pas de slots, cela serait plus difficile car la partie interne du template serait corrigée.
Rappelez-vous: "Tout dans le modèle parent est compilé dans la portée parent; tout dans le modèle enfant est compilé dans la portée enfant."
Utiliser des slots nommés
Les slots nommés fonctionnent de la même manière que les slots simples, mais vous permettent de distribuer du contenu dans différentes régions de votre template de composant enfant.
Prenez le composant page de l'exemple précédent, mais modifiez son modèle pour qu'il soit comme suit:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
Lorsque vous utilisez le composant page , nous pouvons maintenant déterminer où le contenu est placé via l'attribut slot :
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
La page résultante sera:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
Si un slot est défini sans attribut de name tout contenu placé dans des balises de composant ne spécifiant pas d'attribut de slot sera placé dans cet emplacement.
Voir l'exemple d' insertion multiple sur les documents officiels de Vue.js.
Utiliser des slots dans Vue JSX avec 'babel-plugin-transform-vue-jsx'
Si vous utilisez VueJS2 et aimez utiliser JSX avec lui. Dans ce cas, pour utiliser le slot, la solution avec exemple est ci-dessous this.$slots.default utiliser this.$slots.default C'est presque comme this.props.children dans 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>
);
}
};