Vue3迁移疑问：Ag-Grid行组件如何获取父组件实例调用方法？

方案一：通过Props传递回调方法（推荐） #

依赖$parent层级的方式耦合性极强，一旦组件嵌套结构变化就会失效，Vue3更推荐通过明确传递回调的方式实现组件通信，同时这也符合Ag-Grid的官方使用规范。

1. 父组件中配置Ag-Grid列时，把需要调用的方法通过cellRendererParams传递给自定义单元格组件：

<!-- 父组件中的Ag-Grid配置 -->
<ag-grid-vue
  :columnDefs="columnDefs"
  /* 其他Ag-Grid配置项 */
></ag-grid-vue>

<script setup>
// 父组件的业务方法
const GetNotificationHistory = (id) => {
  // 你的业务逻辑实现
}
const GetFilesLists = (id) => {
  // 你的业务逻辑实现
}
const EditReminder = (id) => {
  // 你的业务逻辑实现
}

// Ag-Grid列定义
const columnDefs = [
  // 其他列配置...
  {
    headerName: '操作',
    cellRenderer: 'Actions', // 指定你的自定义操作组件
    cellRendererParams: {
      onInfoClick: GetNotificationHistory,
      onFilesClick: GetFilesLists,
      onEditClick: EditReminder
    }
  }
]
</script>

2. 修改你的Actions组件，通过props接收参数并触发回调：

<template>
  <div class="main">
    <i class="fa fa-info icons" @click="handleInfo"></i>
    <i class="fa fa-file icons" @click="handleFiles"></i>
    <i class="fa fa-edit icons" @click="handleEdit"></i>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

// 定义props接收Ag-Grid传递的参数
const props = defineProps({
  params: {
    type: Object,
    required: true
  }
})

// 点击事件处理
const handleInfo = () => {
  props.params.onInfoClick(props.params.data.id)
}
const handleFiles = () => {
  props.params.onFilesClick(props.params.data.id)
}
const handleEdit = () => {
  props.params.onEditClick(props.params.data.id)
}
</script>

方案二：通过getCurrentInstance访问父级实例（不推荐） #

如果因特殊场景需要保留类似$parent的层级访问方式，Vue3中可通过getCurrentInstance获取组件实例，但生产环境下该API会被压缩，稳定性无法保证，仅作为临时兼容方案：

<template>
  <div class="main">
    <i class="fa fa-info icons" @click="infoButton"></i>
    <i class="fa fa-file icons" @click="filesHistoryButton"></i>
    <i class="fa fa-edit icons" @click="editReminderButton"></i>
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
// 根据Ag-Grid的层级结构，调整parent的访问次数
const targetParent = instance.parent.parent

const infoButton = () => {
  targetParent.proxy.GetNotificationHistory(instance.props.params.data.id)
}
const filesHistoryButton = () => {
  targetParent.proxy.GetFilesLists(instance.props.params.data.id)
}
const editReminderButton = () => {
  targetParent.proxy.EditReminder(instance.props.params.data.id)
}
</script>

关键提醒 #

• 始终优先选择方案一，组件通信逻辑更清晰、解耦，完全适配Vue3的组件设计理念，也符合Ag-Grid的最佳实践。
• 避免依赖组件层级的硬编码访问，后续维护时极易因结构变动引发bug。

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