Vue.js
slot
Ricerca…
Osservazioni
Importante! Gli slot dopo il rendering non garantiscono l'ordine delle posizioni per le slot. Lo slot, che era il primo, potrebbe avere una posizione diversa dopo il rendering.
Utilizzando le singole slot
Gli slot singoli vengono utilizzati quando un componente figlio definisce solo uno slot nel modello. Il componente della page alto utilizza un singolo slot per distribuire il contenuto.
Un esempio della page modello del componente utilizzando un singolo slot è qui sotto:
<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>
Per illustrare come funziona lo slot, possiamo impostare una pagina come segue.
<page>
<p>This content will be displayed within the page component</p>
</page>
Il risultato finale sarà:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
Se non avessimo inserito nulla tra i tag della page e avessimo <page></page> avremmo invece ottenuto il seguente risultato poiché esiste un contenuto predefinito tra i tag dello slot nel modello del componente della page .
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
Quali sono le slot?
Gli slot offrono un modo conveniente di distribuire il contenuto da un componente principale a un componente figlio. Questo contenuto può essere qualsiasi cosa, da testo, HTML o anche altri componenti.
A volte può essere utile pensare alle slot come mezzo per iniettare il contenuto direttamente nel modello di un componente figlio.
Gli slot sono particolarmente utili quando la composizione del componente sotto il componente principale non è sempre la stessa.
Prendi il seguente esempio in cui abbiamo un componente di page . Il contenuto della pagina potrebbe cambiare in base alla visualizzazione di tale pagina, ad esempio un articolo, post di blog o modulo.
Articolo
<page>
<article></article>
<comments></comments>
</page>
Post sul blog
<page>
<blog-post></blog-post>
<comments></comments>
</page>
Modulo
<page>
<form></form>
</page>
Si noti come il contenuto del componente della page può cambiare. Se non usassimo gli slot questo sarebbe più difficile in quanto la parte interna del modello sarebbe stata riparata.
Ricorda: "Tutto nel modello principale è compilato nell'ambito genitore, tutto nel modello figlio è compilato in ambito figlio".
Uso di slot con nome
Gli slot con nome funzionano in modo simile alle singole slot, ma consentono di distribuire il contenuto in aree diverse all'interno del modello di componente figlio.
Prendi il componente della page dall'esempio precedente ma modifica il suo modello in modo che sia come segue:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
Quando si utilizza il componente della page , ora possiamo determinare dove viene posizionato il contenuto tramite l'attributo dello slot :
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
La pagina risultante sarà:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
Se uno slot è definito senza un attributo name qualsiasi contenuto che viene collocato all'interno dei tag del componente che non specifica un attributo slot verrà inserito nello slot.
Vedi l'esempio di multi inserzione sui documenti ufficiali di Vue.js.
Usare gli slot in Vue JSX con 'babel-plugin-transform-vue-jsx'
Se stai usando VueJS2 e ti piace usare JSX insieme ad esso. In questo caso, per usare lo slot, la soluzione con l'esempio è sotto. Dobbiamo usare this.$slots.default È quasi come 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>
);
}
};