Nuxt3 / Vue3 – defineExpose + ref に型を当てる

呼び出し側の記述

refで定義する時に普通に型を当てれば良い

<script setup lang="ts">
type Book = {
  title: string
}

const book = ref<Book>()

</script>

<template>
   <div>{{ book.title }}</div>

  <Book ref="book"/>
</template>

呼びされるComponentの記述例

components/Book.vue

<script lang="ts" setup>
const title = ref('')

defineExpose({
  title,
})
</script>

<template>
  <input v-model="title" />
</template>

参考

https://github.com/vuejs/core/issues/4397

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2024-01-03