如何在Vue的Home组件中访问AgGrid子组件的AG-Grid Grid API？

要实现从Home组件访问AgGrid组件内的AG-Grid Grid API，需要通过组件ref + 暴露内部API的方式实现，具体步骤如下：

1. 修改AgGrid组件，获取并暴露Grid API #

在AgGrid.vue中，给AgGridVue实例添加ref，通过gridReady事件获取Grid API，再用defineExpose将API暴露给父组件：

<template>
  <AgGridVue
    ref="agGridRef"
    :rowData="rows"
    :columnDefs="columns"
    @grid-ready="onGridReady"
  />
</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
  }
})

const agGridRef = ref(null)
const gridApi = ref(null)

const onGridReady = (params) => {
  gridApi.value = params.api
}

// 暴露Grid API给父组件
defineExpose({
  getGridApi: () => gridApi.value
})
</script>

2. 在Home组件中通过ref访问Grid API #

在Home.vue中给AgGrid子组件添加ref，待组件挂载完成后，调用暴露的方法获取Grid API：

<template>
  <AgGrid ref="agGridComponent" :rows="rows" :columns="columns" />
</template>

<script setup>
import { ref, onBeforeMount, onMounted } from 'vue'
import AgGrid from '@/components/AgGrid.vue'
import { rows as fetchRows, columns as fetchColumns } from '@/services/connector'

const rows = ref()
const columns = ref()
const agGridComponent = ref(null)

onBeforeMount(async () => {
  rows.value = fetchRows()
  columns.value = fetchColumns()
})

onMounted(() => {
  // 获取Grid API
  const api = agGridComponent.value.getGridApi()
  // 示例：调用API方法，比如选中第一行
  if (api) {
    api.selectIndex(0)
  }
})
</script>

关键说明 #

• gridReady是AG-Grid内置事件，网格初始化完成后触发，此时可获取完整的Grid API实例。
• Vue3的<script setup>语法下，子组件需通过defineExpose主动暴露属性或方法，父组件才能通过ref访问。

内容的提问来源于stack exchange，提问作者gespinha