Vue3 v-slot ディレクティブ

Vue3 組み込みディレクティブ

v-slotディレクティブは、名前付きスロットまたはスコープ付きスロットを表すために使用され、コンポーネント間のコンテンツ配信に使用されます。

基本説明

v-slotディレクティブは、スロットにコンテンツを提供したり、スロットから渡される props を受け取ったりするために使用されます。これは Vue でコンポーネントのコンテンツ配信を実現する中核的な方法です。

  • 省略記法: #
  • 期待される型: JavaScript 式（任意、props を受け取る場合のみ必要）
  • 用途: 名前付きスロットまたはスコープ付きスロットを表します。

基本的な使い方

1、名前付きスロット

例

<template>
  <base-layout>
    <template v-slot:header>
      <h1>ページタイトル</h1>
    </template>
    <template v-slot:default>
      <p>メインコンテンツ領域</p>
    </template>
    <template v-slot:footer>
      <p>フッター情報</p>
    </template>
  </base-layout>
</template>

2、省略記法

例

<!-- 等価 -->
<template v-slot:header>タイトル</template>
<template #header>タイトル</template>

3、スコープ付きスロット

スコープ付きスロットを使用すると、子コンポーネントが親コンポーネントにデータを渡すことができます：

例

<!-- 親コンポーネント -->
<template>
  <current-user v-slot="slotProps">
    <p>ユーザー名: {{ slotProps.user.name }}</p>
  </current-user>
</template>

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

<!-- 子コンポーネント CurrentUser.vue -->
<template>
  <slot :user="currentUser"></slot>
</template>

<script>
export default {
  data() {
    return {
currentUser: { name: '张三' }
    }
  }
}
</script>

Vue3 組み込みディレクティブ

その他の拡張