Vue3 <script setup> 構文でpops/emitをTypescriptで書いてみた。

現在、Nuxt3, Vue3, TypeScriptsで開発をしております。

私は、今までのNuxtやVueを使っていたわけではなく、Nuxt3を初めて使い、初めてvueを書き始めたので、setup構文でpropsやemitを書く際、どのように受け渡しをするのか、初めは書き方がわからなかっため、初めてnuxtやvueを使ってるよという人のために書いていきます。

そもそも,「props」とは？

一言で言うと、親コンポーネントの値を伝えるもの。

そもそも,「emit」とは？

・親コンポーネントの関数を使えるようにするもの。
・子コンポーネントの値を親に伝えるもの。

ここまでの説明で、わからないことがある方は、一旦必要になるまで温めるか、props, emitに関して、もう少し理解を深めた方がいいかもしれません。
ここでは、書き方をメインしているので、理解が浅いままでは、今後応用する際、混乱してしまう可能性があります。
理解してコードを書くことはとても大切ですので、ある程度理解して、使う前段階で見ていただくといいかもしれません。

書き方を貼っていきます。

親コンポーネント

<script setup lang="ts">

const alertDo = ():  void => {
 alert('クリックされたよ。');
}

</script>

<template>
  <div class="btn-content">
  // ここで値を渡す。
    <Btn 
      // propsへ
      :icon="'dog'"
      :size="'mini'"
      // emitsへ
      @alertDooo="alertDo()"
    />
  </div>
</template>

子コンポーネント

<script setup lang="ts">
type Icon = 'dog' | 'panda' | 'rabbit' ;
type Size = 'mini' | 'normal' | 'big' ;

/**
 * Props
 */
const props = withDefaults(defineProps<{
  //　型定義
  size: Size
  icon: Icon
}>(), {
  // 初期値設定
  size: 'normal',
  icon: 'none',
});

/**
 * Emits
 */
interface Emits {
  // 関数名, 引数の型, 返り値の型
  (e: 'alertDooo', v: null): void;
}

const emits = defineEmits<Emits>();
// 以下のようにも書けます。
const emits = defineEmits<{
  (e: 'alertDooo', v: null): void;
}>()

// 使用時は、
// emits('alertDooo', 渡したい引数またここでは、null);
</script>

補足

const props = 
    withDefaults(
    defineProps<{}>(),
    {}
    );

withDefaultsヘルパーはデフォルト値の型チェックを行う。
型のみの場合は、以下のように書く。
defineProps<{
      size: Size
      icon: Icon
}>(),

emitsに引数を渡すことで、子コンポーネントの値を親に伝えることができます。
簡易的ですが、今回はここで終わりです。

propsとemitを使った親子3代バケツリレー、かつ孫でinputを使っていてその値を運ぶパターンを今度あげます。