父组件
<template>
//使用箭头函数进行调用,传递父组件的默认参数
<cc-export :export-fn="()=>exportFn(useTableColumn,useTableData)" />
</template>
<script>
export default {
components: {
ccExport
},
data () {
return {
useTableColumn:[],
useTableData:[]
}
}
methods: {
exportFn (tableColumn, tableData) {
console.log(tableColumn, tableData)
}
}
}
</script>
子组件
<script>
export default {
name: 'ccExport',
props: {
exportFn: { type: Function }
},
methods: {
async click () {
const { data, headers, name = '导出数据', type = 'csv' } = await this.exportFn()
}
}
</script>
<template>
<div class="cc-export" @click="click">
点击
</div>
</template>