Vue3子组件调用父组件的方法

父组件

<TableBox
  ref="tableBoxRef"
  :tableDatas="tableData"
  :page="page"
  @delRow="delRow"
  :table_columns="table_columns">
</TableBox>
<script>
import TableBox from './components/tableBox.vue'      
export default {
    name: 'reimblist',
    components: {
        TableBox
    },
    setup() {
        const tableData: []
        const page: {
             currentPage: 1,
             pageSize: 10,
             totalPage: 0
        }
        const table_columns: [
	           {
	                title: '单据编号',
	                dataIndex: 'reimbursementNo',
	                key: 'reimbursementNo',
	                align: 'center',
	                slots: { customRender: 'reimbursementNo' },
	                width: 150,
	                show: true
	            },
	            {
	                title: '单据类型',
	                dataIndex: 'formName',
	                key: 'formName',
	                width: 130,
	                show: true
	            }
	        ]
	    const delRow = async (record) => {
            Modal.confirm({
                title: () => '是否确认删除?',
                icon: () => createVNode(ExclamationCircleOutlined),
                okText: () => '确定',
                okType: 'danger',
                cancelText: () => '取消',
                onOk() {
                    delReimbApi({ id: record.id }).then((res) => {
                        if (res.success) {
                            message.success(res.message)
                            queryTable()
                        } else {
                            message.error(res.message)
                        }
                    })
                },
                onCancel() {
                    console.log('Cancel')
                }
            })
        }
        return {
            page,
            table_columns,
            tableData,
            delRow
       }
    }   
}

子组件

<template>
	<CommonTable
      :columns="table_columns.filter((col,num)=> {if(col.show){return col}})"
      :dataSource="tableDatas"
      :scrollX="1300"
      :page="page">
       <template #reimbursementNo="{ record }"> 
           <a-button type="text" 
            danger 
            @click="delRow(record)" 
            v-if="record.state == 0">删除</a-button>
       </template>
   </CommonTable>
</template>
export default {
    components: {
        CommonTable
    },
    props: {
        tableDatas: {
            type: Array,
            default: () => []
        },
        page: {
            default: () => {},
            type: Object
        },
        table_columns: {
            type: Array,
            default: () => []
        }
    },
    setup(props, { emit }) {
        const delRow = (record) => {
            emit('delRow', record)
        }
        return {
            delRow
        }
    }
}
</script>