vue3 子页面根据父页面传递的参数获取数据

1、父页面 index.vue 里调用子页面 approvalRecords.vue
在 html 中编写代码

<a-tab-pane key="ab" tab="资产处置记录">
            <approvalRecords :assetId="assetId"/>
          </a-tab-pane>

这里的assid就是要传给子页面的参数

在页面 js 中编写，引入该组件页面

import approvalRecords from '/@/views/asset/components/approvalRecords.vue';

2、子组件接收
页面 approvalRecords.vue中编写

const props = defineProps({
    assetId:{
      type:Number,
      default:null
    }
  });

3、子页面中调用接口请求数据
先引入调用接口编写的js

import {assetApproveLogApi} from  '/@/api/asset-management/assetApproveLog-api'

// 日志列表
  async function approveLogList() {
    try {
      console.log('调用日志列表');
      tableLoading.value = true;
      queryForm.assetId = props.assetId;
      let res = await assetApproveLogApi.queryAssetApproveLog(queryForm);
      console.log('日志列表');
      console.log(res);
      tableData.value = res.data.list;
      total.value = res.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }

4、编写请求接口代码 assetApproveLog-api.js 文件中编写

import {postRequest, getRequest} from '/@/lib/axios';

export const assetApproveLogApi = {
    // ---------------- 审批日志管理 -----------------------

    //审批日志-审批日志列表
    queryAssetApproveLog(param) {
        return postRequest('/zichan/queryAssetApproveLog', param);
    },


};