I have set up two components: a parent and a child.
App.vue //Parent
<template>
<div class="common-layout">
<Container>
<Header><center>Vue JS 3 (Composition API and )</center></Header>
<Main>
<BookForm ref="bookRef" />
<p v-if="bookRef">{{ bookRef }}</p>
</Main>
</Container>
</div>
</template>
<script setup lang="ts"">
import BookForm from "./components/organism/bookForm/index.vue"
import { ref } from "vue"
import {
ElContainer as Container,
ElHeader as Header,
ElMain as Main,
} from "element-plus"
const bookRef = ref<InstanceType<typeof BookForm>>()
</script>
BookForm.vue //Child
<template>
<Row span="20">
<Column :span="12" :offset="6">
<!-- <HelloWorld /> -->
<Form label-position="top">
<Input label="Title" v-model="title" />
<Input label="Price" v-model="price" />
<Button label="Add" type="success" :onClick="addBook" />
</Form>
</Column>
</Row>
</template>
<script setup lang="ts">
import { ElRow as Row, ElCol as Column, ElForm as Form } from "element-plus"
import HelloWorld from "@/components/HelloWorld.vue"
import Input from "@/components/atom/input/index.vue"
import Button from "@/components/atom/button/index.vue"
import { reactive, ref } from "vue"
interface IBook {
title: string
price: string | number
}
const books = reactive<IBook[]>([])
const title = ref<string>("")
const price = ref<string | number>("")
const addBook = () => {
books.push({ title: title.value, price: price.value })
title.value = ""
price.value = ""
}
</script>
I came across this thread on Vue Forum for a solution, but I am unable to retrieve data from the child component into the parent component.
When I console log console.log(bookRef.value), it returns undefined. What is the correct way to access child component's data using TypeScript and the composition API setup tag?