Vue3中如何在子组件触发父组件事件（基于RevoGrid）

在Vue3项目中使用Revogrid组件搭建仪表盘，将Task子组件作为单元格模板传入Revogrid的列配置。需要在Task组件内触发事件，调用父组件方法修改数据源，从而更新单元格值。之前尝试通过Task.$emitter.on监听事件无效，寻求正确实现方式。

父组件原代码：

<template>
  <div id="home">
    <v-grid theme="material" row-size="48" readonly="true" :source="rows" :columns="aux" />
  </div>
</template>

<script>
import VGrid, { VGridVueTemplate } from "@revolist/vue3-datagrid";
import Task from '../components/Task'; 

export default {
  data() {
    return {
      aux: [],
      columns: [
        {
          name: "Empresa",
          prop: "empresa",
          columnType: "string",
          size: 150,
        },
        {
          name: "Adiantamento",
          prop: "adiantamento",
          size: 150,
          cellTemplate: VGridVueTemplate(Task),
        },
        {
          name: "Sefip",
          prop: "sefip",
          size: 150,
          cellTemplate: VGridVueTemplate(Task),
        }
      ],
    }
  }
}
</script>

尝试无效的代码：

Task.$emitter.on("update_cell", () => {
  alert("I am on the parent");
});

Revogrid的Vue模板组件可通过自定义props传递回调函数，结合Vue的响应式机制实现父子组件通信，具体步骤如下：

1. 父组件：传递更新回调到Task组件 #

修改列配置，在cellTemplate中通过VGridVueTemplate的第二个参数传入自定义props，将父组件的更新方法传递给Task：

<template>
  <div id="home">
    <v-grid theme="material" row-size="48" readonly="true" :source="rows" :columns="columns" />
  </div>
</template>

<script>
import VGrid, { VGridVueTemplate } from "@revolist/vue3-datagrid";
import Task from '../components/Task'; 

export default {
  components: { VGrid },
  data() {
    return {
      rows: [
        // 示例数据源，根据实际业务填充
        { empresa: "公司A", adiantamento: 1000, sefip: 500 },
        { empresa: "公司B", adiantamento: 2000, sefip: 800 }
      ],
      columns: [
        {
          name: "Empresa",
          prop: "empresa",
          columnType: "string",
          size: 150,
        },
        {
          name: "Adiantamento",
          prop: "adiantamento",
          size: 150,
          // 传递自定义props，包含更新回调
          cellTemplate: VGridVueTemplate(Task, {
            onUpdateCell: this.updateCellValue
          }),
        },
        {
          name: "Sefip",
          prop: "sefip",
          size: 150,
          cellTemplate: VGridVueTemplate(Task, {
            onUpdateCell: this.updateCellValue
          }),
        }
      ],
    }
  },
  methods: {
    // 定义更新单元格值的核心方法
    updateCellValue(rowIndex, prop, newValue) {
      // 修改数据源，Vue3响应式会自动触发视图更新
      this.rows[rowIndex][prop] = newValue;
      // 可添加额外逻辑，比如提交到后端
      console.log(`更新行${rowIndex}的${prop}字段为：${newValue}`);
    }
  }
}
</script>

2. 子组件Task：接收回调并触发更新 #

在Task组件中，接收父组件传递的onUpdateCell回调，在需要触发更新的时机（如按钮点击、输入框变更）调用该回调，并传递必要参数：

<template>
  <div class="task-cell">
    <span>{{ modelValue }}</span>
    <!-- 示例：点击按钮触发更新 -->
    <button @click="handleUpdate">修改值</button>
  </div>
</template>

<script>
export default {
  props: {
    // Revogrid自动传入的当前单元格值
    modelValue: {
      type: [String, Number],
      required: true
    },
    // Revogrid自动传入的当前行索引
    rowIndex: {
      type: Number,
      required: true
    },
    // Revogrid自动传入的当前列prop字段名
    columnProp: {
      type: String,
      required: true
    },
    // 接收父组件传递的更新回调
    onUpdateCell: {
      type: Function,
      required: true
    }
  },
  methods: {
    handleUpdate() {
      // 示例逻辑：生成新值，根据实际需求修改
      const newValue = this.modelValue + 100;
      // 调用父组件回调，传递行索引、字段名、新值
      this.onUpdateCell(this.rowIndex, this.columnProp, newValue);
    }
  }
}
</script>

关键说明 #

• Revogrid会自动为模板组件注入modelValue、rowIndex、columnProp等核心props，无需手动传递。
• 避免直接操作组件实例的$emitter，Vue3中结合Revogrid的模板机制，通过props传递回调是更直接可靠的方案。
• 修改rows数据源后，Vue的响应式系统会自动触发Revogrid的视图更新，无需手动调用刷新方法。

内容的提问来源于stack exchange，提问作者Humberto de Angeli Neto