Vue.jsでコンポーネントスロットを使用する方法
序章
多くの場合、親Vueコンポーネントが子コンポーネント内に任意のコンテンツを埋め込むことを許可する必要があります。 Vueは、スロットでこれを実現する方法を提供します。
注: Angularの背景から来ている場合、これはトランスクルージョンまたはコンテンツプロジェクションと同様の概念です。
このチュートリアルでは、スロットとコンテンツを共有する親コンポーネントと子コンポーネントを使用したVueプロジェクトの例を紹介します。
前提条件
この記事をフォローしたい場合は、次のものが必要になります。
- Vue.jsプロジェクトのセットアップと、親コンポーネントと子コンポーネントの使用にある程度精通していると便利です。
このチュートリアルは、ノードv15.10.0、npm
v7.6.0、およびvue
v2.6.11で検証されました。
スロットの使用
親コンポーネントがDOM要素を子コンポーネントに渡すことができるようにするには、子コンポーネント内に<slot>
要素を指定します。
<slot>
を含むChildComponent
の例を次に示します。
ChildComponent.vue
<template> <div> <p>This is the child component.</p> <slot></slot> </div> </template>
ChildComponent
にコンテンツを入力するParentComponent
の例を次に示します。
ParentComponent.vue
<template> <div> <p>This is the parent component.</p> <ChildComponent> <p>This is injected content from the parent component.</p> <p>It can still bind to data in the parent's scope: {{myVariable}}</p> </ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { myVariable: `Parent Variable` } } } </script>
Webブラウザーでアプリケーションを表示すると、次の結果が生成されます。
Output<div> <p>This is the parent component.</p> <div> <p>This is the child component.</p> <p>This is injected content from the parent component.</p> <p>It can still bind to data in the parent's scope: Parent Variable</p> <div> </div>
親コンポーネントのコンテンツとデータが子コンポーネントに挿入されます。
フォールバックコンテンツの提供
親コンポーネントが子コンポーネントの<slot>
にコンテンツを挿入しない場合、子コンポーネントはその<slot>
タグ内の要素をレンダリングします。
フォールバックコンテンツを含むChildComponent
の例を次に示します。
ChildComponent.vue
<template> <div> <p>This is the child component.</p> <slot> <p>Fallback Content</p> </slot> </div> </template>
これは、2つのChildComponent
を持つParentComponent
の例です。1つはスロットコンテンツがあり、もう1つはスロットコンテンツがありません。
ParentComponent.vue
<template> <div> <p>This is the parent component with slot data.</p> <ChildComponent> <p>Slot Content</p> </ChildComponent> <p>This is the parent component without slot data.</p> <ChildCmponent></ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent } } </script>
Webブラウザーでアプリケーションを表示すると、次の結果が生成されます。
Output<div> <p>This is the parent component with slot data.</p> <div> <p>This is the child component.</p> <p>Slot Content</p> <div> <p>This is the parent component without slot data.</p> <div> <p>This is the child component.</p> <p>Fallback Content</p> <div> </div>
フォールバックコンテンツは、スロットコンテンツが親コンポーネントによって提供されていない場合に表示されます。
注:子コンポーネント<template>
に<slot>
要素がない場合、親コンポーネントのコンテンツはすべてサイレントに破棄されます。
これで、<slot>
とフォールバックの使用に関する簡単な紹介が完了しました。
名前付きスロットの使用
コンテンツを挿入するための<slot>
要素が1つあると、いくつかのユースケースを満たすことができます。 ただし、複数の<slot>
要素を利用したい他のユースケースがあるかもしれません。 これは、という名前のスロットを備えたVueで実現できます。
名前付きスロットは、名前付きコンテンツの挿入を可能にするname属性を持つ<slot>
要素です。
<slot name="slotName"></slot>
main
およびaside
の名前付きスロットを備えたコンポーネントの例を考えてみましょう。
ChildComponent.vue
<template> <div> <main> <slot name="main"></slot> </main> <aside> <slot name="aside"></slot> </aside> <slot></slot> </div> </template>
親コンポーネントは、main
およびaside
スロットに装着されます。 名前付きスロットを参照しないコンテンツは、空のスロットに入力されます。
ParentComponent.vue
<template> <div> <ChildComponent> <template v-slot:main> <p>Custom Main</p> </template> <template v-slot:aside> <p>Custom Aside</p> </template> <div> <p>Custom Content</p> </div> </ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent } } </script>
注: Vue 2.6.0より前は、slot
属性を使用していました。 その後、v-slot
ディレクティブに置き換えられました。 Vue 3は廃止され、最終的にslot
属性が削除されます。
Webブラウザーでアプリケーションを表示すると、次の結果が生成されます。
Output<div> <div> <main> <p>Custom Main</p> </main> <aside> <p>Custom Aside</p> </aside> <p>Custom Errata</p> <div> </div>
これで、名前付きスロットの使用に関する簡単な紹介が完了しました。
結論
このチュートリアルでは、スロットとコンテンツを共有する親コンポーネントと子コンポーネントの例を使用してVueプロジェクトを探索しました。
Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。