javascript 如何通过使用vue3的代码设置父组件的事件在子组件中调用

qyyhg6bp  于 2023-03-28  发布在  Java
关注(0)|答案(1)|浏览(123)

我有一个vue3项目,它使用一个名为revogrid的组件来创建一个 Jmeter 板。这个组件接收另一个组件来渲染一个单元格作为参数。我想在子组件内创建一个事件来改变单元格的值,改变父组件的数据源。如何用代码在子组件内设置一个事件?
母体组分:

<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),
        }
      ],

组件Task是变量数组列中的一个属性。我想在任务组件中设置一个事件,触发父组件中的一个方法。
我试过:

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

但不管用...

yhived7q

yhived7q1#

啊哈,就把这个要求搞清楚。

// this is the default column configuration
{
    prop: 'columnAction',
    label: '',
    size: 75,
    minSize: 75,
    maxSize: 75,
    readonly: () => true,
    cellTemplate: VGridVueTemplate(EditableGridCellColumnAction),
}

如果需要传递自定义props或emits,则需要
import { h } from 'vue';
并对cellTemplate添加一些修改,如以下示例

{
    prop: 'columnAction',
    label: '',
    size: 75,
    minSize: 75,
    maxSize: 75,
    readonly: () => true,
    cellTemplate: VGridVueTemplate(

        h(EditableGridCellColumnAction, {
            onDeleteRow: payload => {
            console.info(payload);
            },
        })
    ),
}

相关问题