Vue.jsにおけるtemplateタグの#とは？
概要
.vue
<template #header>
</template>
<template #form>
</template>
<template>タグ内に、存在する#タグの使用方法
結論
-
v-slotの略記法が#に当たる
v-slotとは？
- 親コンポーネント側から、子コンポーネントのテンプレートの一部を差し込む機能
使用方法
子コンポーネントの一部分にslotを差し込む
Sample.vue
<script setup>
</script>
<template>
<p>あなたの名前は<slot name="test">鈴木</slot>です。</p>
</template>
親コンポーネント側で、子コンポーネントのタグ内で差し込みたい名前付きスロットを指定する。
Main.vue
<script setup>
import Sample from "@/Components/Sample.vue";
</script>
<template>
<Sample v-slot:test>
清水
</Sample>
</template>
親コンポーネントで指定した文字に置き換わっていることが確認できる。
output
あなたの名前は清水です。
参考