[Vue3]script setup内の関数を別の場所から呼び出せるようにする

Last updated at 2023-12-10Posted at 2023-12-10

sctipt setupの中で記述された関数は、そのComponent内でしかデフォルトでは呼び出すことができません。

テストで関数をテストしたい時や、親など別なComponentから関数を実行したい場合は、defineExposeが利用できます。

<script setup lang="ts">
const hello = () => {
  return 'Hello World!'
}

defineExpose({
  hello
})
</script>

状態を持っている場合はComposableを使ったり、基本的には別のファイルを作成して、関数はそちらに記載してテストをしやすいようにした方が良いと思いますが、方法として紹介します。