【vue3】script setupで親コンポーネントから子コンポーネントにFunctionをpropsとして受け渡す

やりたいこと

• <script setup>で親コンポーネントから子コンポーネントにFunctionをpropsとして受け渡す
  仕事で<script setup>を勉強することがあったのでメモ。
  今回はボタンコンポーネントに親からFunctionを渡しています。

実装

子コンポーネント

<template>
  <div class="button-component">
    <button @click="onClick">{{ label }}</button>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

defineProps({
  label: {
    type: String,
    default: "label"
  },
  onClick: {
    type: Function,
    default: () => {
      console.log("button default")
    }
  }
})
</script>

親コンポーネント

<template>
  <div class="parent">
    <h1>Test Page</h1>
    <button-component label="parent method" @click="onClick"></button-component>
  </div>
</template>

<script setup lang="ts">
import ButtonComponent from '@/components/ButtonComponent.vue';

function onClick () {
  console.log("parent method")
}
</script>

ボタン押してみた

①@clickを指定していない方のボタンをクリック

Functionを渡してないのでdefualtのメソッドが呼び出される

②@clickを指定した方のボタンをクリック

親から渡したFunctionが実行される

感想

<script setup>はまだまだ慣れないですね。
使いこなせたら便利そう。