子组件继承父组件函数并使用父组件参数进行调用

63 阅读1分钟

父组件

<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>