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>
);
}
};