composition apiで子コンポーネントから型情報を親に渡す
2019/10/27
composition api 勉強メモ
export interfaceで子コンポーネントで型情報を定義してエクスポートする
定義した型をpropsに付与する
Item.vue
<template>
<div>{{ todo.title }}</div>
</template>
<script lang="ts">
import { createComponent,PropType } from'@vue/composition-api'
export interface Todo {
id: number
title: string
}
export default createComponent({
props: {
todo: Object as PropType<Todo>
},
setup() {}
})
</script>
親コンポーネントで型情報をインポートして定義
setup内でstateに定義したData型を付与
stateにはプロパティ名todosしか入れることができなくなり、todos配列には{ id: number, title: string} の型しか入れることができなくなる
List.vue
<template>
<ul>
<li v-for="item in state.todos" :key="item.id">
<Item :todo="item" />
</li>
</ul>
</template>
<script lang="ts">
import { createComponent, reactive } from'@vue/composition-api'
import Item, { Todo } from '~/components/Item.vue'
export type Data = {
todos: Todo[]
}
export default createComponent({
components: {
Item
},
setup() {
const state: Data = reactive({
todos: []
})
state.todos = [
{
id: 1,
title: 'タイトル1'
},
{
id: 1,
title: 'タイトル2'
}
]
return {
state
}
}
})
</script>
型定義を一箇所で定義しているため、管理がしやすくなる