二级页面跳转vue3 props传参(不使用路由)

跳转二级页面不通过路由了，因为会新增一个没有名称的tab，而且点击一次会新增一个tab。现在改为引用组件的方式，下面为由路由改为引用组件的步骤

1 引入二级页面组件

import purchasePlanForm from './purchasePlanForm.vue';
export default defineComponent({
name: 'purchaseAuditList',
components: { createView, purchasePlanForm },
setup(){
...
}
}); 

2 二级页面之前的路由参数改为props

// purchasePlanForm.vue
export default defineComponent({
  name: '采购计划管理录入',
  props: { // 这些根据自己需要定义，主要是把之前路由的参数都改为props
    bill_form_id: {
      type: String,
    },
    bill_id: {
      type: String,
    },
    bill_type_id: {
      type: String,
    },
    business_type: {
      type: String,
    },
    operateflag: {
      type: String,
    },
    auditStatus: {
      type: Number,
    },
  },
  
});

 3 修改二级页面的之前路由参数获取方式，现在改为props获取

let billFormId = props.bill_form_id as string;
let bill_id = props.bill_id as string;
let business_type = props.business_type as string;
let bill_type_id = props.bill_type_id as string;
purchasePlanFormData.operateflag = props.operateflag || '0';
purchasePlanFormData.auditStatus = props.auditStatus || 0; 

4 一级页面引入二级页面组件，二级组件通过formPageVisible 用v-if 控制显示，之前的用v-show当formPageVisible为false时显示，同时监听goBack事件

<div v-show="!formPageVisible" class="create_view_wrap">
    <create-view
      :allUiViews="allUiViews"
      :selectList="selectList"
      :dataSource="dataSource"
      :isEnter="isEnter"
      :cusUiButtonObj="cusUiButtonObj"
      :cusColumnObj="cusColumnObj"
      :custableConfigData="custableConfigData"
      @doSearch="doSearch"
      @resetQuery="resetQuery"
      @billchecked="billchecked"
      @tabChange="tabChange"
      @btnClick="btnClick"
      @operate="handleOperate"
      @handlePageChange="handlePageChange"
    ></create-view>
  </div>
  <purchasePlanForm
    v-if="formPageVisible"
    :bill_form_id="bill_form_id"
    :bill_id="bill_id"
    :business_type="business_type"
    :bill_type_id="bill_type_id"
    :operateflag="operateflag"
    :auditStatus="auditStatus"
    @goBack="hideFormPage"
  />

5 修改路由跳转，我是定义了一个showFormPage的方法，路由跳转的时候直接调这个方法

let formPageVisible = ref(false);
const componentProps = reactive({
bill_form_id: '',
bill_id: '',
bill_type_id: '',
business_type: '',
operateflag: '0',
auditStatus: 0,
});

const billchecked = (menuitem: any) => {
// console.log(menuitem, 'menuitem');
// router.push({
//   path: /framework-web3/pro-gic-web/purchase/purchasePlanForm/${menuitem.bill_form_id}/${undefined}/${menuitem.bill_type_id}/${businessType}/0,
// });
showFormPage(menuitem.bill_form_id, '', menuitem.bill_type_id, businessType, '0');
};

/** 显示二级页面 */
const showFormPage = (
bill_form_id: string,
bill_id: string,
bill_type_id: string,
business_type: string,
operateflag: string,
auditStatus: number = 0,
) => {
formPageVisible.value = true; // 显示二级组件
componentProps.bill_form_id = bill_form_id; // 传参
componentProps.bill_id = bill_id;
componentProps.bill_type_id = bill_type_id;
componentProps.business_type = business_type;
componentProps.operateflag = operateflag;
componentProps.auditStatus = auditStatus;
};
/** 隐藏二级页面 */
const hideFormPage = () => {
formPageVisible.value = false // 隐藏二级组件
getTableData() // 重新获取数据
}

6  修改二级页面的goBack方法，改为派发goBack事件

/** 返回 */
const goBack = () => {
// router.go(-1);
emit('goBack');
};