Typescript✖️Vue3で、props,emits

Typescript✖️Vue3でpropsとemitsがしたい

参考記事
https://zenn.dev/aoito/articles/a09eb484344ae2

definePropsのつかいかた

親から子へ

親コンポーネント.vue

<template>
  <child :title="Title">
</template>

<script setup lang="ts">
import child from "子コンポーネント.vue"

const Title = 'あああ'
</script>

子コンポーネント.vue

<template>
  <h1>{{ title }}</h1>
</template>

<script setup lang="ts">
const props = defineProps<{
  title: string
}>()
</script>

defineEmitsのつかいかた

子から親へ

子コンポーネント.vue

<template>
  <button @click="onChange(false)">閉じる</button>
</template>

<script setup lang="ts">
const emits = defineEmits<{(e: 'click', value?: boolean): void}>()
const onChange = (value?: boolean): void => {
  emits('click', value)
}
</script>

親コンポーネント.vue

<template>
  <child v-if="isActive" @click="onChange" />
  <button @click="changeActive">子コンポーネントを表示する</button>
</template>

<script setup lang="ts">
import child from "子コンポーネント.vue"

const isActive = ref<boolean>(false)
const onChange = (val?: boolean) => {
  isActive.value = val;
}
const changeActive = () => {
  isActive.value = true;
}
</script>