Vue.js
speelautomaten
Zoeken…
Opmerkingen
Belangrijk! Slots na render garanderen geen volgorde voor posities voor slots. Slot, die de eerste was, kan na het renderen een andere positie hebben.
Enkele slots gebruiken
Enkele slots worden gebruikt wanneer een onderliggende component slechts één slot binnen zijn sjabloon definieert. Het bovenstaande page gebruikt één slot om inhoud te verspreiden.
page ziet u een voorbeeld van de sjabloon van de paginacomponent met één slot:
<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>
Om te illustreren hoe het slot werkt, kunnen we een pagina als volgt instellen.
<page>
<p>This content will be displayed within the page component</p>
</page>
Het eindresultaat zal zijn:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
Als we niet alles te stoppen tussen de page -tags een plaats had <page></page> we zouden in plaats daarvan op het volgende resultaat aangezien er standaard inhoud tussen de slot -tags in de page component template.
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
Wat zijn slots?
Slots bieden een handige manier om inhoud van een oudercomponent naar een onderliggende component te distribueren. Deze inhoud kan van alles zijn, van tekst, HTML of zelfs andere componenten.
Soms kan het handig zijn om slots te beschouwen als een manier om inhoud rechtstreeks in de sjabloon van een onderliggende component te injecteren.
Slots zijn vooral handig als de samenstelling van de componenten onder de bovenliggende component niet altijd hetzelfde is.
Neem het volgende voorbeeld waarbij we een page hebben. De inhoud van de pagina kan veranderen op basis van of die pagina bijvoorbeeld een artikel, blogbericht of formulier weergeeft.
Artikel
<page>
<article></article>
<comments></comments>
</page>
Blogpost
<page>
<blog-post></blog-post>
<comments></comments>
</page>
Het formulier
<page>
<form></form>
</page>
Merk op hoe de inhoud van het page kan veranderen. Als we geen slots zouden gebruiken, zou dit moeilijker zijn omdat het binnenste gedeelte van de sjabloon zou worden vastgesteld.
Onthoud: "Alles in de bovenliggende sjabloon is gecompileerd in bovenliggende scope; alles in de onderliggende sjabloon is gecompileerd in onderliggende scope."
Benoemde slots gebruiken
Benoemde slots werken op dezelfde manier als afzonderlijke slots, maar stellen u in staat om inhoud te distribueren naar verschillende regio's binnen uw onderliggende componentensjabloon.
Neem de page component uit het vorige voorbeeld, maar pas de sjabloon aan zodat deze als volgt is:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
Bij gebruik van de page component kunnen we bepalen waar content is geplaatst via de slot kenmerk:
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
De resulterende pagina zal zijn:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
Wanneer een slot is gedefinieerd zonder name attribuut vervolgens alle inhoud die is geplaatst in component markeringen niet opgeven van een slot attribuut in die sleuf worden geplaatst.
Zie het voorbeeld van meerdere invoegingen in de officiële documenten van Vue.js.
Slots gebruiken in Vue JSX met 'babel-plugin-transform-vue-jsx'
Als je VueJS2 gebruikt en graag JSX gebruikt. In dit geval, om de slot te gebruiken, is de oplossing met het voorbeeld hieronder. We moeten this.$slots.default Het is bijna zoals this.props.children in 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>
);
}
};