Vue.jsスロット

スロットは、コンポーネント内のコンテンツの配置に役立ち、親コンポーネントがコンテンツを配置できるようにします。

次の場合のように、コンポーネントはその出力の生成に100％責任を持つことができます。

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

または、親コンポーネントに任意の種類のコンテンツを挿入させることもできます。スロット。

スロットとは何ですか？これは、コンポーネント出力内で予約され、いっぱいになるのを待っているスペースです。

あなたは置くことによってスロットを定義します<slot></slot>コンポーネントテンプレート内：

Vue.component('user-information', {
  template: '<div class="user-information"><slot></slot></div>'
})

このコンポーネントを使用する場合、開始タグと終了タグの間に追加されたコンテンツは、スロットプレースホルダー内に追加されます。

<user-information>
  <h2>Hi!</h2>
  <user-name name="Flavio"></user-name>
</user-information>

コンテンツ側に置くと<slot></slot>タグ。何も渡されない場合のデフォルトのコンテンツとして機能します。

複雑なコンポーネントレイアウトでは、複数のスロットを使用して、コンテンツを整理するためのより良い方法が必要になる場合があります。

これがVueが私たちに提供する理由です名前付きスロット。

名前付きスロット

名前付きスロットを使用すると、スロットの一部をコンポーネントテンプレートレイアウトの特定の位置に割り当てることができ、slotそのスロットにコンテンツを割り当てるために、任意のタグに属性を付けます。

テンプレートタグの外側にあるものはすべてメインに追加されますslot。

便宜上、私はpageこの例の単一ファイルコンポーネント：

<template>
  <div>
    <main>
      <slot></slot>
    </main>
    <aside>
      <slot name="sidebar"></slot>
    </aside>
  </div>
</template>

親コンポーネントでスロットコンテンツを提供して、これを使用する方法は次のとおりです。

<page>
  <template v-slot:sidebar>
    <ul>
      <li>Home</li>
      <li>Contact</li>
    </ul>
  </template>

<h2>Page title</h2>
<p>Page content</p>
</page>

便利な速記があります、#：

<page>
  <template #sidebar>
    <ul>
      <li>Home</li>
      <li>Contact</li>
    </ul>
  </template>

<h2>Page title</h2>
<p>Page content</p>
</page>

注：Vue2.6は非推奨になりましたslotに有利な属性v-slot、およびに追加する必要がありますtemplateタグ（slot任意のタグに適用できます）

スコープスロット

スロットでは、親から子コンポーネントに含まれるデータにアクセスできません。

Vueはこのユースケースを認識し、そのための方法を提供します。

<template>
  <div>
    <main>
      <slot v-bind:dogName="dogName"></slot>
    </main>
  </div>
</template>

<script>
export default {
name: ‘Page’,
data: function() {
return {
dogName: ‘Roger’
}
}
}
</script>

親では、次を使用して渡した犬の名前にアクセスできます。

<page>
  <template v-slot="slotProps">
    {{ slotProps.dogName }}
  </template>
</page>

slotProps渡した小道具にアクセスするために使用した変数です。オブジェクトをその場で破壊することにより、子コンポーネントに渡す小道具を保持するためだけに変数を設定することを回避することもできます。

<page>
  <template v-slot="{ dogName }">
    {{ dogName }}
  </template>
</page>

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル：


Tech Wiki Online！