vm.$slotsについて

Vue.js

2024.03.28

vm.$slotsは、Vue.jsのインスタンスがスロット内容を保持する特別なプロパティです。スロットは、親コンポーネントから子コンポーネントにコンテンツを渡すためのメカニズムであり、特に親コンポーネント内のテンプレート内で<slot>要素を使用して子コンポーネントに挿入されたコンテンツを指します。

vm.$slotsを使用すると、Vue.jsのコンポーネント内でスロット内のコンテンツにアクセスできます。これにより、スロットに挿入されたコンテンツを操作したり、動的に表示するための柔軟性を持たせることができます。

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

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>Parent Component</h2>
    <ChildComponent>
      <p>Content passed from parent.</p>
    </ChildComponent>
  </div>
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>Child Component</h3>
    <slot></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$slots.default); // [VNode]
  }
};
</script>

この例では、ParentComponent.vueが親コンポーネントであり、その中でChildComponent.vueが子コンポーネントとして使用されています。親コンポーネント内で<ChildComponent>タグの中に<p>要素が含まれており、これがスロットに挿入されたコンテンツとなります。子コンポーネント内のmountedフックでthis.$slots.defaultをコンソールに出力することで、スロット内のコンテンツにアクセスしています。

$slotsを使うことで、親から渡されたコンテンツを子コンポーネントで柔軟に表示したり操作したりすることができます。