vue.jsの練習⑥（公式チュートリアルstep-11～step-14の2周目）
Vue.jsの練習⑤の続き
step-11から最後まで
step-11 コンポーネント
コンポーネントは独自のHTML要素のように使える再利用可能なVueインスタンスを指す。これにより、大規模なプロジェクトをより管理しやすく小さな単位に分割することができる。各コンポーネントは自身のテンプレート、ロジック、スタイルを持ち、他のコンポーネントと独立して動作するか、または他のコンポーネントと組み合わせて使用することができる。
<script setup>
import ChildComp from './ChildComp.vue'
</script>
<template>
<ChildComp />
</template>
step-12 props
子コンポーネントは、 props を介して親コンポーネントからの入力を受け入れる。
親コンポーネントから子コンポーネントへの通信は主にpropsを通じて行われる。これにより、親コンポーネントは子コンポーネントに必要なデータを渡すことが可能。
コードは以下のように書き、型を記載する。
<script setup>
const props = defineProps({
msg: String
})
</script>
<template>
<h2>{{ msg || 'No props passed yet' }}</h2>
</template>
step-13 Emits
子から親への通信は、子コンポーネントが、 emit を介して親コンポーネントにイベントを発生させることによって行われる。親コンポーネントはこれらのイベントをリスニングし、適切なメソッドを実行することができます。
なお、イベントを発生させる際に、それに関連するデータを引数として渡すことも可能。ただし、引数として渡したデータはイベントに関連する追加情報を提供するものであり、状態管理やデータの直接的な「移動」ではないことに注意が必要。
<script setup>
const emit = defineEmits(['response'])
emit('response', 'hello from child')
</script>
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'
const childMsg = ref('No child msg yet')
</script>
<template>
<ChildComp @response="(msg) => childMsg = msg" />
<p>{{ childMsg }}</p>
</template>
<script setup>
const emit = defineEmits(['response'])
emit('response', 'hello from child')
</script>
<template>
<h2>Child component</h2>
</template>
step-14 スロット
スロットは、コンポーネント間でHTMLやコンポーネントの内容を挿入するための機能である。
親コンポーネントは、 props 経由だけでなく、スロット経由で子にテンプレートフラグメントを渡すこともできる。
名前付きスロットの例
// 子コンポーネント
<template>
<div>
<h2>ヘッダー</h2>
<slot name="header">デフォルトのヘッダーコンテンツ</slot>
<div>メインコンテンツ</div>
<h2>フッター</h2>
<slot name="footer">デフォルトのフッターコンテンツ</slot>
</div>
</template>
<script setup>
// 機能を書く
</script>
<template>
<ChildComponent>
<template #header>
<p>slot部のヘッダーコンテンツ</p>
</template>
<template #footer>
<p>slot部のフッターコンテンツ</p>
</tqemplate>
</ChildComponent>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
スコープ付きスロットの例
<template>
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item">{{ item.defaultText }}</slot>
</li>
</ul>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
{ id: 1, defaultText: 'Item 1' },
{ id: 2, defaultText: 'Item 2' }
]);
</script>
一言感想
一周目に業務で触れる機会の多いVue2を見てから、Vue3を見たことで理解しやすい部分もあったので良かった。これから新しい言語やフレームワーク、概念を学ぶ際には、馴染みのあるものでまず理解してから知識を広げていく形で学んでいきたいと思う！
Discussion