• HOME
  • nuxt3でのprops記述について
TomoyaOkada

nuxt3でのprops記述について

記事をシェアする

最近TypeScriptを触りながらnuxt3にも挑戦しています。
色々と書き方が違う部分があるので備忘録としていきます。

コンポーネント側

<script setup lang="ts">
interface Props {
  enTitle: string;
  jpTitle: string;
  indexClass: string;
}


const Props = withDefaults(defineProps<Props>(), {
  enTitle: "",
  jpTitle: "",
  indexClass: "",
});
</script>


<template>
  <div class="common-page-cover" :class="indexClass">
    <h2 class="common-page-title">
      <span class="_en">{{ enTitle }}</span>
      <span class="_jp">{{ jpTitle }}</span>
    </h2>
  </div>
</template>


props は defineProps() で定義され、デフォルト値を定義する場合には、 withDefaults を使用するようです。


呼び出し側

呼び出し方は2系と特に変わりはないようです。

    <PartsCommonTitle enTitle="hoge" jpTitle="fuga" indexClass="index" />




■パートナー募集について
運営元であるkraftでは一緒に活動するパートナーを募集しています。
個々が協力していくことによってクオリティの高い制作をおこなっていくことができると考えています。
ご興味のある方は、こちらよりご連絡いただけますと幸いです。(※運営元の事業サイトに飛びます)

具体的な内容については以下URLをご確認ください。
パートナー募集の詳細について

記事をシェアする