Vue.js
spelautomater
Sök…
Anmärkningar
Viktig! Spelautomater efter render garanterar inte beställning för positioner för slots. Slot, som var den första, kan ha en annan position efter renderingen.
Med hjälp av enkla kortplatser
Enstaka platser används när en barnkomponent bara definierar en slot sin mall. Den page komponenten ovan använder en enda kortplats för att distribuera innehåll.
Ett exempel på page komponentens mall med användning av en enda slits är nedan:
<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>
För att illustrera hur spåret fungerar kan vi ställa in en sida enligt följande.
<page>
<p>This content will be displayed within the page component</p>
</page>
Slutresultatet blir:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
Om vi inte sätta allt mellan de page taggarna en i stället hade <page></page> skulle vi istället ge följande resultat eftersom det finns standardinnehåll mellan slot taggarna i page mall komponent.
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
Vad är slots?
Spelautomater erbjuder ett bekvämt sätt att distribuera innehåll från en överordnad komponent till en barnkomponent. Detta innehåll kan vara allt från text, HTML eller till och med andra komponenter.
Ibland kan det vara bra att tänka på slots som ett sätt att injicera innehåll direkt i en barnkomponents mall.
Slots är särskilt användbara när komponentkompositionen under moderkomponenten inte alltid är densamma.
Ta följande exempel där vi har en page komponent. Sidans innehåll kan ändras utifrån om den sidan visar t.ex. en artikel, blogginlägg eller form.
Artikel
<page>
<article></article>
<comments></comments>
</page>
Blogginlägg
<page>
<blog-post></blog-post>
<comments></comments>
</page>
Form
<page>
<form></form>
</page>
Lägg märke till hur innehållet på page komponenten kan förändras. Om vi inte använde slots skulle detta vara svårare eftersom den inre delen av mallen skulle fixas.
Kom ihåg: "Allt i föräldermallen sammanställs i föräldrarnas omfattning; allt i barnmallen sammanställs i barnomfång."
Med namngavna slots
Namngivna slots fungerar på samma sätt som enstaka slots men tillåter dig istället att distribuera innehåll till olika regioner i din barnkomponentmall.
Ta page komponenten från föregående exempel men ändra den mall så det är som följer:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
När du använder page komponenten kan vi nu avgöra var halten placeras via slot attribut:
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
Den resulterande sidan blir:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
Om en slot definieras utan name attribut sedan innehållet som är placerad inom komponent taggar inte specificerar en slot attribut kommer att placeras in i den kortplats.
Se exempel på flera insättningar på de officiella dokumenten från Vue.js.
Använda Slots i Vue JSX med 'babel-plugin-transform-vue-jsx'
Om du använder VueJS2 och gillar att använda JSX tillsammans med det. I detta fall, för att använda spåret, är lösningen med exemplet nedan. Vi måste använda this.$slots.default Det är nästan som det this.props.children i 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>
);
}
};
