[JavaScript知识库]vue父组件向子组件传递函数方法

父组件, fetch-method是函数

<DataTable
        ref="table"
        :table-data="deviceTable"
        :show-columns="deviceColumns"
        :selectable="true"
        :pageSize="filter.pageSize"
        :total="filter.total"
        :fetch-method="getDeviceList"
        @filter-table="filterTable"
        @handle-view="handleView"
      />

methods: {
 
    // 获取设备列表
    getDeviceList(obj) {
      console.log(obj)
      const filter = cloneDeep(this.filter);
      // console.log(params);
      const params = {...filter, ...obj}
      console.log(params, 'params');
      return assetManage.getDevicesPost(params).then((res) => {
        const { items, total } = res.data;
        this.deviceTable = items;
        this.filter.total = total;
        return { items, total }
      });
    },

子组件

接受该函数
props: {
    fetchMethod: {
      type: Function,
      default: () => {},
    },
    // 
    methods: {
    子组件调用父组件的函数
    getList() {
      this.fetchMethod({
        order_by: this.orderBy,
        pageNo: this.currentPage,
        pageSize: this.realPageSize,
      }).then((res) => {
        console.log(res, "res");
        const { total, items } = res;
        this.total = total;
        this.tableData = items;
      });
    },

参考文章:https://blog.csdn.net/joyvonlee/article/details/108754662