关于vue3父组件按钮点击，子组件抽屉展示数据，传参的方法

业务逻辑是父组件是按钮点击事件，子组件是一个抽屉，调用的是Vben里面的一个方法。

第一步引入该方法，引入子组件AuthRoleDrawer，connectedComponent链接子组件

import { Page, useVbenDrawer } from '@vben/common-ui';

import { isValidData, } from '#/utils';

const [Drawer, drawerApi] = useVbenDrawer({

  connectedComponent: AuthRoleDrawer,

  // closeOnClickModal: false,

});

function clickRoleBtn(e: any) {

  drawerApi

    .setData({

//抽屉组件名字

      title: '权限角色修改',

//当前行的数据

      rowData: e,

//父组件的数据

      editableTabs: editableTabs.value,

//父组件刷新页面的方法

      onRefresh: handleRefresh,

    })

    .open();

}

// 刷新当前数据

const handleRefresh = (rePage?: number) => {

  if (rePage) {

    pagination.value.current = rePage;

  }

//列表数据重新加载

loadData();

};

//列表数据

function loadData() {

  authRoleUserListApi(formData.value).then((res: any) => {

//校检的方法

    if (isValidData(res)) {

      pagination.value.current = Number(res.current);

      pagination.value.size = Number(res.size);

      pagination.value.total = Number(res.total);

      records.value = res.records;

    }

  });

}

第二部：

子组件部分

import { confirm, useVbenDrawer, useVbenModal } from '@vben/common-ui';

const [Drawer, drawerApi] = useVbenDrawer({

  showConfirmButton: false,

  showCancelButton: false,

  onOpenChange(isOpen) {

    if (isOpen) {

      data.value = drawerApi.getData<Record<string, any>>();

      title.value = data.value.title;

      editableTabs.value = data.value.editableTabs;

      let roleIds = data.value.rowData.roleId.split(',').map(Number);

      formData.value = editableTabs.value

        .filter((item) => roleIds.includes(item.id))

        .map((item) => item.id);

    }

  },

});

async function onConfirm() {

  const loadingInstance = ElLoading.service({

    lock: false,

    background: 'rgba(0, 0, 0, 0.5)',

    customClass: 'custom-loading',

  });

  authRoleUserUp({

    userId: data.value.rowData.userId,

    roleIds: formData.value.join(','),

  })

    .then(() => {

      ElMessage.success('修改成功');

      const data = drawerApi.getData<{ onRefresh?: Function }>();

      data.onRefresh?.();

    })

    .finally(() => {

      loadingInstance.close();

      drawerApi.close();

    });

}

function onCancel() {

  drawerApi.close();

}