はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
前々回の学習記録記事、および前回の学習記録記事ではpropsや$emitを用いて親子のコンポーネント間でデータの受け渡しをしていましたが、今回の記事ではslotやslotPropsを用いてデータの受け渡しを行っていこうと思います。
slotを用いてHtmlを子コンポーネントへ渡す
propsでは特定の値などを子コンポーネントへ渡していましたがslotを用いるとHtmlを子コンポーネントに渡すことができます。
親.vue
<template>
<div>
<child>
<div>おはようボタン</div>
</child>
</div>
</template>
子.vue
<template>
<div>
<slot></slot> <-- 親.vueの「<div>おはようボタン</div>」が入ってくる
</div>
</template>
複数のslotを渡す際は名前付きslotを用います。
親.vue
<template>
<div>
<child>
<template v-slot:morning>
<div>おはようボタン</div>
<template>
<template v-slot:afternoon>
<div>こんにちはボタン</div>
<template>
</child>
</div>
</template>
子.vue
<template>
<div>
<slot name="morning"></slot> <-- 親.vueの「<div>おはようボタン</div>」が入ってくる
<slot name="afternoon"></slot> <-- 親.vueの「<div>こんにちはボタン</div>」が入ってくる
</div>
</template>
子コンポーネントから親コンポーネントに値を渡す際は$emitでもできますがslotPropsを用いて渡すことも可能です。
以下では{{ slotProps }}部分に{ "text": "あああ" }という形で値が渡ってきます。
親.vue
<template v-slot:test="slotProps">
<div>{{ slotProps }}</div>
</template>
子.vue
<template>
<div>
<slot name="test" :text="text"></slot>
</div>
</template>
<script>
export default {
data() {
return {
text:"あああ"
};
}
};
</script>
以上を用いてサンプルを作ってみる
基本的にはslotの勉強を主な目的として、簡単なサンプルを作ってみました。
- 「おはようボタン」をクリックすると
おはよう～！とアラートが出る - 「メッセージ変更」ボタンをクリックし、再度「おはようボタン」をクリックすると
おはよう～！子から変更～というアラートに変更される - 「子からのデータ出現」ボタンをクリックすると
子からのおはようタイトルでした！という文字が表示される
サンプルコード
App.vue
<template>
<div>
<morning @change-morning-message="changeMorningMessage">
<template v-slot:default="slotProps">
<button @click="alertMorningMessage">おはようボタン</button>
<div v-if="slotProps !== ''">{{ slotProps.title }}</div>
</template>
</morning>
</div>
</template>
<script>
import Morning from "./components/Morning.vue";
export default {
data() {
return {
morningMessage: "おはよう～！",
};
},
components: {
Morning,
},
methods: {
alertMorningMessage() {
alert(this.morningMessage);
},
changeMorningMessage(value) {
this.morningMessage = value;
},
},
};
</script>
Morning.vue
<template>
<div>
<slot :title="title"></slot>
<button @click="changeMessage">メッセージ変更</button>
<button @click="setTitle">子からのデータ出現</button>
</div>
</template>
<script>
export default {
data() {
return {
title: ""
};
},
methods: {
changeMessage() {
this.$emit("change-morning-message", "おはよう～！子から変更～");
},
setTitle() {
this.title = "子からのおはようタイトルでした！";
},
},
};
</script>
結果
「おはようボタン」をクリックすると以下のようにアラートが出ます。
「メッセージ変更」ボタンをクリックし、再度「おはようボタン」をクリックするとおはよう～！子から変更～というアラートに変更されていることが分かります。
「子からのデータ出現」ボタンをクリックすると子からのおはようタイトルでした！という文字が表示されます。
おわりに
今のところVue.jsはとても分かりやすくて楽しいです！
引き続き学習を続けていきたいと思います！