🚀

Vue3,Nuxt3勉強備忘録

2024/07/10に公開

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