【Nuxt3】Props・Emitsを使うときのオブジェクト記述方法の違いについて

おはようございます。そうすけです。

運営者：そうすけ

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

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

PropsとEmitsの機能はVUE３（Nuxt３）では開発のメインの機能になってくると思います。

最初は人のソースコードを見ながら学習します。

しかし他の人のソースコードが人や参考書によって異なり、初心者のうちは困惑することがあると思います。

厳密にはTypescriptやVue３の文法の記述方法の違いになります。

Typescriptをしっかり学んだ方は特に問題ない方と思いますが、いきなりフレームワークから使用することもあります。

何とおりかの記述方法があるのでまとまてみました。

PropsとEmitsとは

簡単に言うと、親コンポーネントと子コンポーネントの間のやりとりのための関数です。

親コンポーネントや子コンポーネントの状態が変化することによって、画面を再描画する必要があります。

• Props→親から子へ
• Emits→子から親へ

親から子に、子から親にやり取りするための変数や関数を作っておくイメージです。

props

Props型のオブジェクトを宣言しておいて、そのオブジェクトをdefineProps関数でやり取りができるようになります。

このときジェネリクス型でオブジェクト型（今回ならProps型）に指定してやることで親で代入した値を子へわたすことができるようになります。

①スクリプト内でオブジェクトを作る
<script lang="ts" setup>
interface Props  {
    dark:string;
    content:string;
}
②definePropsで親で書かれた変数を受け取る
const props = defineProps<Props>(),

</script>

emits

emitsはpropsより少しややこしいです。

propsは下記手順です。

①親から引き受けたい変数を宣言
②Definepropsを使用

この２つだけでデータをやりとりすることでします。

子コンポーネントからdefineEmitsという関数を使って、親コンポーネントに用意したイベントを発火します。

その引数として子コンポーネントのデータを送ります。

順番でいうと、下記手順を踏みます。

①親に渡したい変数と発火したい関数をオブジェクトとして宣言
②Defineprops関数で①のオブジェクトをもったEmitsを作成
③イベントを発火したいタイミング（演算後など）でEmitsを実行
④親要素のイベントが発火され、子から親に値が渡る

問題：書き方が色々ある

PropsとEmitsは宣言の仕方がほとんど同じです。

ですが、VueやTypescriptではいろんな書きかたができるので、開発者によって色々な書きかたができます。

オブジェクトの宣言が違う！

ジェネリクス

型の定義とジェネリクスの使用を同時に行っているパターンです。

わかりやすさはへったかもですが、かなり記述がすっきりしますね。

<script lang="ts" setup>
const props =defineProps<{
    dark:string;
    content:string;
}>()

</script>

型宣言＋define●●関数

interfaceやtypeで型定義してから、defineProps関数のジェネリクスで型宣言しています。

<script lang="ts" setup>
interface Props  {
    dark:string;
    content:string;
}
const props = defineProps<Props>();

</script>

これはおまけですが、初期値を使いたいときはこんな書き方もします。

withDefaults関数で第一引数にdefineProps、第二引数に初期値を定義します。

<script lang="ts" setup>
interface Props  {
    dark:string;
    content:string;
}

const props = withDefaults(defineProps<Props>(),{
    dark:'darkmode',
    content:'hogehoge',

});

</script>

オブジェクトの関数プロパティの書き方が違う！

通常の関数

通常の関数は関数オブジェクトとしてそのまま定義しているような書き方です。

<script lang="ts" setup>
const props =defineProps<{
    dark:string;
    content:string;
    switchMode():void;
    switchMessage():string;
}>()
</script>

アロー関数

対してアロー関数の書き方は、定数に関数の内容を代入しているようなイメージでしょうか。

オブジェクトでの書き方は、下記のような流れです。

<script lang="ts" setup>
const props =defineProps<{
    dark:string;
    switchMode:()=>void;
    switchMessage:(message: string)=>string;
}>()

</script>

①定数
②コロン
③引数
④アロー
⑤戻り値

アロー関数自体はこのような記載方法です。

const switchMessage = (message: string): string => {
  // 処理内容
  return "processed " + message;
};

①定数
②引数
③戻り値
④アロー
⑤処理内容

通常のアロー関数とオブジェクトのアロー関数は、アローの位置が違います。

初学者にはこんがらがりました。

まとめ

• PropsとEmitは型定義してからdefine●●関数に代入する方法と、型定義とdefine●●関数を同時に代入する２つがある
• 関数オブジェクトの書き方は、通常の関数とアロー関数がある
• アロー関数オブジェクトはアローの位置が関数処理内容を書くときと異なるので注意