vm.$scopedSlotsについて

Vue.js

2024.03.28

vm.$scopedSlotsは、Vue.jsのインスタンスがスコープ付きスロット内容を保持する特別なプロパティです。スコープ付きスロットは、親コンポーネントから子コンポーネントに渡されるコンテンツであり、子コンポーネント側でスコープ変数として利用されます。

スコープ付きスロットは、子コンポーネントが受け取ったデータを元に、自身のテンプレート内で任意の処理や表示を行うために使用されます。この場合、スコープ付きスロットには親コンポーネントから渡されたデータを処理するための関数が含まれます。

以下は、vm.$scopedSlotsの使用例です。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>Parent Component</h2>
    <ChildComponent>
      <!-- スロットの中で data を受け取り、その値を表示する -->
      <template v-slot:default="data">
        <p>{{ data.message }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>Child Component</h3>
    <!-- スコープ付きスロットの内容を表示する -->
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child!'
    };
  }
};
</script>

この例では、ParentComponent.vueが親コンポーネントであり、その中でChildComponent.vueが子コンポーネントとして使用されています。親コンポーネント内で、ChildComponentコンポーネントに対してスコープ付きスロットを使用しています。子コンポーネント内で、受け取ったmessageデータを表示するためにスコープ付きスロットを利用しています。

vm.$scopedSlotsを使用することで、親から渡されたデータを子コンポーネント内で処理し、柔軟に表示や操作することができます。