vue3组件间传值

definProps方式

子组件：assignSuppliers.vue

const prop=defineProps({fid:String});

父组件：index.vue

  <!-- 供应商分配 -->
    <n-drawer
      width="800"
      v-model:visible="drawerSupplierConfig.visible"
      :title="drawerSupplierConfig.title"
      :closable="false">
      
      <assignSuppliers v-if="drawerSupplierConfig.visible" ref="assignSuppliersRef" :fid="fid" />

      <template #extra>
        <div class="drawer-footer flex">
          <n-button style="margin-right: 8px" type="primary" key="submit" @click="handleCancel">保存</n-button> 
          <n-button key="back" @click="handleCancel">取消</n-button>
        </div>
      </template>
    </n-drawer>

在父组件中，给子组件参数赋值


const handleAction = (e: string) => {
  let rows = tableRef.value?.getSelectedRows(),
    record = rows?.[rows.length - 1];
  switch (e) {
    case "create":
      create();
      break;
    case "edit":
      if (!record) return message.warn(langMap.value["common.noDataMsg"]);
      handle(record, "edit");
      break;
    case "view":
      if (!record) return message.warn(langMap.value["common.noDataMsg"]);
      handle(record, "detail");
      break;
    case "do_AssignSupplier":
      if (!record) return message.warn(langMap.value["common.noDataMsg"]); 
     
      //给子组件变量赋值
      console.log("record[0].objId==", record.objId);
      drawerSupplierConfig.visible = true;
      fid.value=record.objId;
 

      break;

    default:
      break;
  }

defineExpose方式

子组件

<template>
  <div class="w-full h-full bg-white flex flex-col rounded-8 page-goods">
    <Header
      :labelCol="{ span: 6 }"
      :wrapperCol="{ span: 18 }"
      :formConfig="searchConfig"
      @onQuery="handleSearch"
      @onReset="handleReset"
      v-if="false"
    />
    <div>SelectRows.FatherId:{{ fatherID }}</div>
    <!-- 列表 -->
    <base-table
      ref="tableRef"
      checkbox="radio"
      :autoWidth="false"
      :columns="columnsSuppler"
      :query-api="QueryDetail"
      :query-args="queryArgs"
    >
    <template #columns="{ column, currentRecord }">
      <n-input
            class="w-full"
            placeholder="采购订单行号"
            v-model:value="currentRecord.tj0warehouseLocationDes"
            v-if="column.key == 'tj0warehouseLocationDes'"
            :maxlength="50"
          ></n-input>
          <n-input-number
            class="w-full"
            placeholder="分配数量"
            v-model:value="currentRecord.tj0wareHouse"
            v-if="column.key == 'tj0wareHouse'"
            :maxlength="50"
          ></n-input-number>
     
      </template>
    </base-table>
  </div>
</template>

<script setup lang="ts">
import { QueryDetail } from "@/api/wms/vmiManged";
import type { BaseTableExpose } from "@/types/baseTable";
import { EditOutlined, EyeOutlined, PlusOutlined } from "@nancal-icon/icons-vue";
import { message } from "n-designv3";
import { ExtendConfig } from "./extend";
const {columnsSuppler , searchConfig, langMap } = ExtendConfig;
const tableRef = ref<BaseTableExpose>();
const fatherID = ref<string>();
const prop=defineProps({fid:String});

 const SelectRows = reactive({
  FatherId: "22",
});
 const setFatherID = (ids: string = "11") => { 
  fatherID.value = ids;
  console.log("FatherId ===================", fatherID.value);
};
 const setSelectRows = (ids: string) => { 
  SelectRows.FatherId = ids;
  console.log("SelectRows.FatherId ===================", SelectRows.FatherId);
};
const queryArgs: any = reactive({
  attrSet: [],
  condition: [],
  sorts: [
    {
      name: "createAt",
      sort: "desc",
    },
  ],
  page: {
    pageNo: 1,
    pageSize: 15,
  },
});

const enable = (event: any) => {
  if (!event.enable) return "否";
  if (!!event.enable) return "是";
};
// 搜索
const handleSearch = (model: any) => {
  queryArgs.page.pageNo = 1;
  tableRef.value?.setQueryArgs(model);
  queryList2();
};
// 重置搜索
const handleReset = () => {
  tableRef.value?.setSelectedRows([]);
  queryArgs.condition = [];
  queryList2();
};

const queryList2 = () => {
  tableRef.value?.refreshList();
};
onMounted(() => {
  queryList2();
  console.log('prop.fid===================',prop.fid);
 
});
const exposeObj = {
  setSelectRows,
  fatherID,
  setFatherID,
  SelectRows,
  queryList2,
};
 

export type AssignSupplierExpose = typeof exposeObj;
defineExpose(exposeObj);
</script>

<style scoped lang="less">
:deep(.nl-tabs-nav) {
  border-bottom: 1px solid #e5e5e5;
  .nl-tabs-nav-wrap {
    padding: 0px 10px;
  }
}
.button-sy {
  color: #595959;
}
.icon-sy {
  color: #999999;
}
</style>

父组件

<template>
  <div class="flex flex-col">
    <Header
      :labelCol="{ span: 6 }"
      :wrapperCol="{ span: 18 }"
      :formConfig="searchConfig"
      @onQuery="handleSearch"
      @onReset="handleReset"
    />

    <menu-boll :btnList="btnList" @btnclickEmit="handleAction" />

    <!-- 列表 -->
    <base-table
      ref="tableRef"
      :autoWidth="false"
      :columns="columns"
      :query-api="QueryData"
      :query-args="queryArgs"
    >
    </base-table>

    <!-- 备料单详情 -->
    <n-drawer
      width="800"
      v-model:visible="drawerDetailConfig.visible"
      :title="drawerDetailConfig.title"
    >
      <Part-Details v-if="drawerDetailConfig.visible" ref="assignSuppliersRef" />
    </n-drawer>
    <!-- 供应商分配 -->
    <n-drawer
      width="800"
      v-model:visible="drawerSupplierConfig.visible"
      :title="drawerSupplierConfig.title"
      :closable="false">

      <assignSuppliers v-if="drawerSupplierConfig.visible" ref="assignSuppliersRef" :fid="fid" />

      <template #extra>
        <div class="drawer-footer flex">
          <n-button style="margin-right: 8px" type="primary" key="submit" @click="handleCancel">保存</n-button> 
          <n-button key="back" @click="handleCancel">取消</n-button>
        </div>
      </template>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import { Add, Detail, QueryData, Update } from "@/api/wms/vmiManged";
import type { BaseTableExpose } from "@/types/baseTable";
import {
  AssociationOutlined,
  DistributeOutlined,
  EditOutlined,
  EyeOutlined,
  NextLevelOutlined,
  ShoppingCartOutlined,
  PlusOutlined,
  UserOutlined,
} from "@nancal-icon/icons-vue";
import { message } from "n-designv3";
import { ExtendConfig } from "./extend";
import PartDetails from "./details.vue";
import assignSuppliers , { type AssignSupplierExpose }  from "./assignSuppliers.vue";
const { columns, formConfig, searchConfig, langMap } = ExtendConfig;
const tableRef = ref<BaseTableExpose>();
const fid = ref<string>();
const assignSuppliersRef = ref<AssignSupplierExpose>();
const btnList = [
  { type: "create", icon: ShoppingCartOutlined, name: "生成拣料任务" },
  { type: "delete", icon: AssociationOutlined, name: "取消拣料任务" },
  { type: "do_AssignSupplier", icon: UserOutlined, name: "供应商分配" },
  { type: "view", icon: EyeOutlined, name: "详 情" },
];
const drawerDetailConfig = reactive({
  title: "备料单详情",
  visible: false,
});

const drawerSupplierConfig = reactive({
  title: "供应商分配",
  visible: false,
});
const partEditRef = ref<PartEditExpose>();

const handleCancel = () => {
  drawerSupplierConfig.visible = false;
};
// 表单
const formModel = ref<any>({
  enable: 1,
});
const visible = ref<boolean>(false);
const status = ref<string>("add");
const title = ref<string>("新建");
const formRef = ref();

const queryArgs: any = reactive({
  attrSet: [],
  condition: [],
  sorts: [
    {
      name: "createAt",
      sort: "desc",
    },
  ],
  page: {
    pageNo: 1,
    pageSize: 15,
  },
});

const enable = (event: any) => {
  if (!event.enable) return "否";
  if (!!event.enable) return "是";
};
// 搜索
const handleSearch = (model: any) => {
  queryArgs.page.pageNo = 1;
  tableRef.value?.setQueryArgs(model);
  queryList();
};
// 重置搜索
const handleReset = () => {
  tableRef.value?.setSelectedRows([]);
  queryArgs.condition = [];
  queryList();
};

const handleAction = (e: string) => {
  let rows = tableRef.value?.getSelectedRows(),
    record = rows?.[rows.length - 1];
  switch (e) {
    case "create":
      create();
      break;
    case "edit":
      if (!record) return message.warn(langMap.value["common.noDataMsg"]);
      handle(record, "edit");
      break;
    case "view":
      if (!record) return message.warn(langMap.value["common.noDataMsg"]);
      handle(record, "detail");
      break;
    case "do_AssignSupplier":
      if (!record) return message.warn(langMap.value["common.noDataMsg"]);

     // supplerHandle(record, "do_AssignSupplier");
   
      console.log("record[0].objId==", record.objId);
      drawerSupplierConfig.visible = true;
      // fid.value=record.objId;
      // setTimeout(() => {
      //   fid.value="aaaaaaaaaaaaaaaaa";//record.objId;
      // }, 0);
      nextTick(()=>{
        fid.value="aaaaaaaaaaaaaaaaa";//record.objId;
        // assignSuppliersRef.value?.setFatherID("dddddddddddddddd");
        // assignSuppliersRef.value?.setSelectRows(record.objId);
      });
     

      break;

    default:
      break;
  }
};

const create = () => {
  visible.value = true;
  status.value = "add";
  formConfig.value[0].attrs.disabled = false;
};

const handle = (row: any, type: string) => {
  drawerDetailConfig.visible = true;
};
const supplerHandle = (row: any, type: string) => {
  drawerSupplierConfig.visible = true;
};
const close = () => {
  title.value = "新建";
  visible.value = false;
  formModel.value = {
    enable: 1,
  };
  formRef?.value?.fields();
};

const confirm = async () => {
  try {
    await formRef?.value?.validate();
    const API = status.value === "add" ? Add : Update;
    if (typeof formModel.value.enable == "boolean") {
      formModel.value.enable = formModel.value.enable ? 1 : 0;
    }

    API(formModel.value).then((res: any) => {
      if (res.code === "0") {
        message.success("操作成功");
        close();
        handleReset();
      }
    });
  } catch (err) {
    console.log(err);
  }
};

const queryList = () => {
  tableRef.value?.refreshList();
};
onMounted(() => {
  queryList();
});
defineExpose({ queryList });
</script>

<style scoped lang="less">
:deep(.nl-tabs-nav) {
  border-bottom: 1px solid #e5e5e5;
  .nl-tabs-nav-wrap {
    padding: 0px 10px;
  }
}
.button-sy {
  color: #595959;
}
.icon-sy {
  color: #999999;
}
</style>