#参考
Udemy参考動画：https://www.udemy.com/course/vue-js-complete-guide/
講師 : よしぴー(Yoshipi)さん
__Vue.js__で__slot__タグを使って__htmlタグを親コンポーネントで定義__する方法をご紹介します。
#通常
子コンポーネント : ChildComponent
//ChildComponent
<template>
<div>
<p>{{ title }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title,
};
}
};
</script>
親コンポーネント App.Vue
//App.Vue
<template>
<div>
<ChildComponent :title="タイトル"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from "./components/ChildComponent.vue";
export default {
components: {
ChildComponent,
},
};
</script>
##結果
タイトル
__値__や__プロパティ__を渡し、__タグ__は__子コンポーネント__で定義する。
#スロット
- タグを__親コンポーネント__で__定義__できる
- 対応 : ver2.6.0~
子コンポーネント : ChildComponent
//ChildComponent
<template>
<div>
<slot></slot>
</div>
</template>
親コンポーネント : App.Vue
//App.Vue
<template>
<div>
<ChildComponent>
<template>
<p>タイトル</p>
<template>
</ChildComponent>
</div>
</template>
##結果
タイトル
コンポーネント内の__templateタグ__と子コンポーネントの__slotタグが対応__
#デフォルト
__slotの数__だけ__templateが生成__されるため、__slotタグを複数置く__と同じ__内容が連続__して表示される
デフォルトの仕様ということで__フォールバックコンテンツ__と呼ばれる。
例えば、
子コンポーネント : ChildComponent
//ChildComponent
<template>
<div>
<slot></slot>
<slot></slot>
<slot></slot>
<slot></slot>
</div>
</template>
##結果
タイトル
タイトル
タイトル
タイトル
#スコープ
- インスタンス内（親コンポーネント内）
- CSSは例外 : 親コンポーネントのスタイルが優先的に働く
#名前付きslot
- slot : name属性（子コンポーネント）
- template : v-slot（親コンポーネント）
name__の値と__v-slot__の引数が__対応
注意：nameは__値__、v-slotは__引数__
子コンポーネント : ChildComponent
//ChildComponent
<template>
<div>
<slot name="title"></slot>
<slot name="name"></slot>
</div>
</template>
親コンポーネント : App.Vue
//App.Vue
<template>
<div>
<ChildComponent>
<template v-slot:title>
<p>タイトル</p>
<template>
<template v-slot:name>
<p>太郎</p>
<template>
</ChildComponent>
</div>
</template>
##結果
タイトル
太郎