Vue.js
スロット
サーチ…
備考
重要!レンダリング後のスロットは、スロットの位置の順序を保証しません。最初のSlotは、レンダリング後に別の位置になることがあります。
単一スロットの使用
子コンポーネントがそのテンプレート内に1つのslot
しか定義していない場合、単一スロットが使用されます。上記のpage
コンポーネントは、単一のスロットを使用してコンテンツを配信します。
1つのスロットを使用するpage
コンポーネントのテンプレートの例は次のとおりです。
<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>
スロットの仕組みを説明するために、次のようにページを設定できます。
<page>
<p>This content will be displayed within the page component</p>
</page>
最終結果は次のようになります。
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This content will be displayed within the page component</p>
</body>
</html>
<page></page>
代わりにpage
タグの間に何も置かなければ、 page
コンポーネントテンプレートのslot
タグの間にデフォルトの内容があるので、代わりに次の結果が得られます。
<html>
<head>
<title>Page Title</title>
</head>
<body>
This will only be displayed if there is no content
to be distributed.
</body>
</html>
スロットとは何ですか?
スロットは、親コンポーネントから子コンポーネントにコンテンツを配布する便利な方法を提供します。このコンテンツは、テキスト、HTML、または他のコンポーネントからでも得ることができます。
子コンポーネントのテンプレートに直接コンテンツを挿入する方法として、スロットを考えることが時々役に立ちます。
スロットは、親コンポーネントの下にあるコンポーネントの構成が常に同じでない場合に特に便利です。
次の例では、 page
コンポーネントを使用していpage
。ページの内容は、記事、ブログ投稿、フォームなど、そのページが表示されているかどうかによって変わる可能性があります。
記事
<page>
<article></article>
<comments></comments>
</page>
ブログ投稿
<page>
<blog-post></blog-post>
<comments></comments>
</page>
形
<page>
<form></form>
</page>
page
コンポーネントの内容がどのように変化する可能性があるかに注目してpage
。スロットを使用しないと、テンプレートの内側部分が固定されるため、これはより困難になります。
覚えて: "親テンプレートのすべてが親スコープでコンパイルされ、子テンプレートのすべてが子スコープでコンパイルされます。"
名前付きスロットの使用
名前付きスロットは単一のスロットと同様に機能しますが、子コンポーネントテンプレート内の異なる地域にコンテンツを配信することができます。
前の例のpage
コンポーネントを使用しますが、テンプレートを次のように変更します。
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<slot name="sidebar"></slot>
</aside>
<main>
<slot name="content"></slot>
</main>
</body>
</html>
page
コンポーネントを使用する際に、コンテンツがslot
属性を介してどこに配置されるかを判断できるようになりました。
<page>
<p slot="sidebar">This is sidebar content.</p>
<article slot="content"></article>
</page>
結果のページは次のようになります。
<html>
<head>
<title>Page Title</title>
</head>
<body>
<aside>
<p>This is sidebar content.</p>
</aside>
<main>
<article></article>
</main>
</body>
</html>
場合slot
なしで定義されたname
、属性を指定しないコンポーネント・タグ内に配置されている任意のコンテンツslot
属性をそのスロット内に配置されます。
Vue.js公式ドキュメントのマルチ挿入の例を参照してください。
Vue JSXで 'babel-plugin-transform-vue-jsx'を使用したスロットの使用
あなたがVueJS2を使用していて、それと一緒にJSXを使うのが好きなら。この場合、スロットを使用するには、以下の例の解決策がありthis.$slots.default
を使用する必要がありますthis.$slots.default
React JSのthis.props.children
ようなものthis.props.children
。
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>
);
}
};