「コンポーネント」の質問

[tokuda109]

https://github.com/vuejs-jp/learn.nuxt.com/blob/main/content/1.vue/5.components/index.md で何か困ったことや質問があれば遠慮なく質問して下さい

[nanauda]

テキストに

const emit = defineEmits<{ sendMessage: [] }>()

const emit = defineEmits<{ sendMessage: [string] }>()

がありますが、両方同じ意味でしょうか?
[] の意味についても教えていただきたいです。

[ubugeeei]

@nanauda

ありがとうございます！
こちらは Emit で受け渡すデータの型を表しています！

<script setup lang="ts">
const emit = defineEmits<{ sendMessage: [] }>()
</script>

<template>
  <button type="button" @click="emit('sendMessage')">
    Click me
  </button>
</template>

の場合は emit でデータを渡していないと思うのですが，

<!-- Child.vue -->
<script setup lang="ts">
const emit = defineEmits<{ sendMessage: [string] }>()
</script>

<template>
  <button type="button" @click="emit('sendMessage', 'Hello, Vue!')">
    Click me
  </button>
</template>

の場合は 'Hello Vue!' という文字列を親に伝搬しています．これの型が [string] です．

さらに追加で複数渡したい場合は [string, number, string] のようにタプルの形式で定義することができます．
Labeled Tuple で名前をつけてあげるとよりわかりやすいです！ (e.g. [msg: string, count: number, user: User])

参考: https://ja.vuejs.org/guide/typescript/composition-api.html#typing-component-emits

[nanauda]

emitで引数を渡さない場合に[]になるんですね([]は配列の意味じゃなかったのですね) 👁️ 興味深いです。
ありがとうございます！