Vue.jsでスコープコンポーネントスロットを使用する方法

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

序章

コンポーネントスロットはいくつかのユースケースを満たしますが、スロット内のテンプレートがスロットコンテンツをホストする子コンポーネントからのデータにアクセスできるようにする他のシナリオがあります。たとえば、コンテナのデータプロパティへのアクセスを維持したまま、コンテナでカスタムテンプレートを許可しようとしている場合は、スコープスロットを使用する必要があります。

スコープコンポーネントスロットは、Vue2.1.0で導入された機能です。これらを使用すると、子コンポーネントからスコープスロットにプロパティを渡し、親からそれらにアクセスできます。逆プロパティの受け渡しのようなものです。

このチュートリアルでは、スコープ付きコンポーネントスロットとプロパティを共有する親コンポーネントと子コンポーネントを使用したVueプロジェクトの例を紹介します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

Vue.jsプロジェクトのセットアップと、親コンポーネントと子コンポーネントの使用にある程度精通していると便利です。

ノート：

Vue 2.6.0 では、スロットの構文が変更されました。このチュートリアルでは、2.6.0の構文について説明します。

このチュートリアルは、ノードv15.10.0、npm v7.6.0、およびvuev2.6.11で検証されました。

スコープコンポーネントスロットの使用

スコープコンポーネント<slot>を作成するには、最初に、子コンポーネントから名前付きまたは名前なしのスロットにプロパティを渡す必要があります。

名前のない要素と名前の付いた<slot>要素を含むChildComponentの例を次に示します。

ChildComponent.vue

<template>
  <div>
    <p>This is a child component.</p>
    <div>
      <p>Default Slot</p>
      <slot v-bind:text="defaultSlotText"></slot>
    </div>
    <div>
      <p>Named Slot</p>
      <slot name="namedSlot" v-bind:text="namedSlotText"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultSlotText: "Default Slot Text",
      namedSlotText: "Named Slot Text"
    }
  }
}
</script>

次に、親コンポーネントのv-slotコンテンツ内でこれらのプロパティを使用するには、子コンポーネントの<slot>要素に関連付けられた<template>要素を作成します。

<template>要素に属性を追加し、スコープのプロパティにアクセスする名前に設定します。これにより、基本的に、そのテンプレート内のすべてのローカル変数が作成され、親のスコープ内にあるかのようにアクセスできるようになります。

たとえば、"firstScope"の場合、<slot>に渡されたプロパティは{{firstScope.exampleProperty}}としてアクセスでき、secondScope"は{{secondScope.exampleProperty}}としてアクセスできます。

defaultSlotTextとnamedSlotTextを参照するParentComponentの例を次に示します。

ParentComponent.vue

<template>
  <div>
    <p>This is a parent component.</p>
    <ChildComponent>
      <template v-slot="defaultSlotText">
        <p>{{defaultSlotText.text}}</p>
      </template>
      <template v-slot:namedSlot="namedSlotText">
        <p>{{namedSlotText.text}}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

Webブラウザーでアプリケーションを表示すると、次の結果が生成されます。

Output
<div>
  <p>This is a parent component.</p>
  <div>
    <p>This is a child component.</p>
    <div>
      <p>Default Slot</p>
      <p>Default Slot Text</p>
    </div>
    <div>
      <p>Named Slot</p>
      <p>Named Slot Text</p>
    </div>
  </div>
</div>

defaultSlotText.textとnamedSlotText.textは、子コンポーネントから親コンポーネントに渡されます。

結論

このチュートリアルでは、スコープ付きスロットとプロパティを共有する親コンポーネントと子コンポーネントを使用したVueプロジェクトの例について説明しました。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036