🚀
Vue3,Nuxt3勉強備忘録
propsの仕組み
vue3のコンポーネントは、親コンポーネントから小コンポーネントにデータを渡す際にpropsを使用する。
propsはJavaScriptオブジェクトであり、コンポーネントが受け取るプロパティを定義する。
基本的な使い方
1.子コンポーネントの定義
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script setup>
defineProps({
title: String,
content: String
})
</script>
2.親コンポーネントでの使用
<template>
<ChildComponent title="Hello World" content="This is a content." />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
</script>
Propsのバリデーション
Vue3では、propsのバリデーションを行うことができる。バリデーションはオブジェクトの形式で行い、各プロパティには型、必須性、デフォルト値などを指定できる。
<script setup>
defineProps({
title: {
type: String,
required: true
},
content: {
type: String,
default: "Default content"
}
})
</script>
Discussion