Liquidsのロゴ Liquids

0

definePropsの使い方【Vue】

Vue.js

definePropを用いることで、親コンポーネントから子コンポーネントへデータの受け渡しを行うことができます。

このWikiではdefinePropsの使用方法について紹介します。

JavaScriptでは、definePropsの引数にオブジェクトを与えることでpropsの内容を記述できます。

ChildComponent.vue
<script setup> const props = defineProps({ firstName: String, lastName: String, age: Number }); </script> <template> <p>name is {{ props.firstName + ' ' + props.lastName }}</p> <p>age is {{ props.age }}</p> </template>
ParentComponent.vue
<template> <div> <ChildComponent first-name="johnathan" last-name="miller" :age="26" /> </div> </template>

TypeScriptではpropsの定義をジェネリクスに書くことができます。

ChildComponent.vue
<script setup lang="ts"> const props = defineProps<{ firstName: string; lastName: string; age: number; }>(); </script> <template> <p>name is {{ props.firstName + ' ' + props.lastName }}</p> <p>age is {{ props.age }}</p> </template>
ParentComponent.vue
<template> <div> <ChildComponent first-name="johnathan" last-name="miller" :age="26" /> </div> </template>

また、interfaceを利用してpropsの内容を定義することもできます。

ChildComponent.vue
<script setup lang="ts"> interface Props { firstName: string; lastName: string; age: number; } const props = defineProps<Props>(); </script> <template> <p>name is {{ props.firstName + ' ' + props.lastName }}</p> <p>age is {{ props.age }}</p> </template>

Liquidsのロゴ Liquids

Liquidsは誰でも投稿・編集ができる技術Wikiコミュニティ📝です。

あなたもLiquidsで技術Wikiを
書いてみませんか?