【Nuxt3】Vueで再利用できるボタンコンポーネントを作ろう

2024年1月8日2024年1月25日

愛媛在住のエンジニア兼ブロガー。
工場勤務から社内SEにキャリアチェンジ。
主に社内向けのシステム開発を行っています。

【ブログ運営歴】2021.6~
【プログラミング歴】2022.3~
本業：Java,MySQL、個人：Javascript

駆け出しエンジニアのそうすけです！

Webアプリでコンポーネントの再利用が多いのは入力フォームやボタンかと思います。

処理・表示・スタイルをいちいち変えるのは面倒…
再利用したいけど、どう実装したらいいの？

そういった方に向けての記事になります。

実装例

アプリのボタンに戻るこんなコンポーネントを作ります。

<template>
        <h1>アプリ</h1>
         <div class="text-right"> 
            <ButtonPrimary :on-click="goBack">アプリTOPに戻る</ButtonPrimary>
         </div>
        </h1>
</template>

<script>
//アプリのトップに戻る関数
const goBack = () => {"/");
}

</script>

<template>
    <button
    class="rounded-md bg-accent-200 py-1 px-4 text-sm shadow-md hover:opacity-20 dark:border-2 dark:border-accent-300 dark:bg-coffee dark:text-accent-200"
    v-on:click="onClick()"
    >
      <slot/>
    </button>

</template>
<script setup lang="ts">
const props = defineProps<{
    onClick:Function
}>();
</script>

ポイント

propsで関数を渡せる状態にしておく
型をFunctionにしておくことで戻り値・引数がる場合も対応できるようにしておく
slotで名前を変えれるようにする

まず。propsを定義して、親から関数を渡せる状態にしておきます。

そしてFuctionに型定義することで、引数・戻り値の型を指定しない方にしています。

typescript的にはあまりよくない書き方なので明示的に戻り値がないことを書きたい方は下記のようにアロー関数とvoidでできます。

<script setup lang="ts">
const props = defineProps<{
    onClick: () => void;
}>();
</script>

そしてボタンタグの間を<slot/>で名前を変えれるようにすることで、同じbuttonのコンポーネントで名前のみ変えることができます。

    <button
    class="rounded-md bg-accent-200 py-1 px-4 text-sm shadow-md hover:opacity-20 dark:border-2 dark:border-accent-300 dark:bg-coffee dark:text-accent-200"
    v-on:click="onClick()"
    >
      <slot/>
    </button>