Vue.js
Schlüssel
Suche…
Bemerkungen
Wichtig! Slots nach Render garantieren keine Reihenfolge der Positionen für Slots. Slot, der erste, hat nach dem Rendern möglicherweise eine andere Position.
Einzelne Slots verwenden
Einzelne Steckplätze werden verwendet, wenn eine untergeordnete Komponente nur einen slot in ihrer Vorlage definiert. Die obige page verwendet einen einzelnen Slot zum Verteilen von Inhalt.
Nachfolgend finden Sie ein Beispiel für die Vorlage der page , die einen einzelnen Steckplatz verwendet:
<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>
Um zu zeigen, wie der Slot funktioniert, können wir eine Seite wie folgt einrichten.
<page>
<p>This content will be displayed within the page component</p>
</page>
Das Endergebnis wird sein:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
Wenn wir nichts zwischen die page stattdessen <page></page> , würden wir stattdessen das folgende Ergebnis liefern, da zwischen den slot Tags in der page Standardinhalt vorhanden ist.
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
Was sind Slots?
Slots bieten eine bequeme Möglichkeit, Inhalte von einer übergeordneten Komponente an eine untergeordnete Komponente zu verteilen. Dieser Inhalt kann aus Text, HTML oder anderen Komponenten bestehen.
Es kann manchmal hilfreich sein, sich Slots als ein Mittel vorzustellen, mit dem Inhalt direkt in die Vorlage einer untergeordneten Komponente eingefügt werden kann.
Slots sind besonders nützlich, wenn die Komponentenzusammensetzung unter der übergeordneten Komponente nicht immer gleich ist.
Nehmen wir das folgende Beispiel, wo wir eine page . Der Inhalt der Seite kann sich abhängig davon ändern, ob auf dieser Seite ein Artikel, ein Blogbeitrag oder ein Formular angezeigt wird.
Artikel
<page>
<article></article>
<comments></comments>
</page>
Blogeintrag
<page>
<blog-post></blog-post>
<comments></comments>
</page>
Bilden
<page>
<form></form>
</page>
Beachten Sie, wie sich der Inhalt der page ändern kann. Wenn wir keine Slots verwenden würden, wäre dies schwieriger, da der innere Teil der Vorlage repariert würde.
Denken Sie daran: "Alles in der übergeordneten Vorlage wird im übergeordneten Bereich kompiliert. Alles in der untergeordneten Vorlage wird im untergeordneten Bereich kompiliert."
Benannte Slots verwenden
Benannte Slots funktionieren ähnlich wie einzelne Slots. Sie können stattdessen Inhalte in verschiedenen Bereichen innerhalb Ihrer untergeordneten Komponentenvorlage verteilen.
Nehmen Sie die page aus dem vorherigen Beispiel, ändern Sie die Vorlage jedoch wie folgt:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
Bei Verwendung der page können wir nun über das slot Attribut bestimmen, wo der Inhalt platziert wird:
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
Die resultierende Seite wird sein:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
Wenn ein slot ohne definiert ist name - Attribut dann alle Inhalte , die innerhalb Komponente Tags platziert ist kein Spezifizierungs slot Attribut wird in diesem Schlitz angeordnet werden.
Siehe das Beispiel für die Mehrfacheinfügung in den offiziellen Dokumenten von Vue.js.
Slots in Vue JSX mit 'babel-plugin-transform-vue-jsx' verwenden
Wenn Sie VueJS2 verwenden und JSX zusammen damit verwenden möchten. In diesem Fall den Schlitz zu verwenden, die Lösung mit Beispiel ist below.We verwenden hat this.$slots.default Es ist fast wie this.props.children in JS React.
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>
);
}
};