In my application, I have a component called Home and another one called AgGrid. The AgGrid component is displayed within the Home component, containing the actual AG-Grid. Here's how the Home component is structured:
<template>
<AgGrid :rows="rows" :columns="columns" />
</template>
<script setup>
import { ref, onBeforeMount } from 'vue'
import AgGrid from '@/components/AgGrid.vue'
import { rows, columns } from '@/services/connector'
const rows = ref()
const columns = ref()
onBeforeMount(async () => {
rows.value = rows()
columns.value = columns()
})
</script>
The structure of the AgGrid component is as follows:
<template>
<AgGridVue
:rowData="rows"
:columnDefs="columns"
/>
</template>
<script setup>
import 'ag-grid-community/styles/ag-grid.css'
import { AgGridVue } from 'ag-grid-vue3'
import { ref } from 'vue'
const props = defineProps({
rows: {
type: Array,
required: true
},
columns: {
type: Array,
required: true
}
})
</script>
I am trying to figure out how to access the AG-Grid Grid API of the AgGrid component from the Home component. Any suggestions?