vue3的父子组件传值

1、父传子

即子调用父级函数——子给父发申请，然后父组件批准，在子组件调用父级函数

子组件：
const emit = defineEmits(['register', 'success']);
emit('success');
父组件：
<LkFeeHeadModal @register="registerModal" @success="handleSuccess" />

案例：
//子组件
<script lang="ts" setup>
    const emit = defineEmits(['success', 'close']); //①传关键字给父级，申请调用父级函数
    function onlinePaymentOk() {
      paymentState.value = {
        feeBillHeadSn: "",
        realityAmount: 0,
      }
      emit('success'); //②调用父级函数
      onlinePaymentVisible.value = false;
      emit('close'); //②调用父级函数
    }
</script>

//父组件
<template>
    <div>
   //②子组件实例化 -- 'success', 'close'是子传给父，设置对应父级函数
		<FcFundsLkPay ref="payFall" @success='handleSuccess' @close="closeModal"/>  
  </div>
</template>
<script lang="ts" name="fee-fcFundsLk" setup>
    //①引入子组件
    import FcFundsLkPay from './components/FcFundsLkPay.vue';
	import { useModal } from '/@/components/Modal';
	//③被调用的函数
	 function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }
	//注册model
 	 const [registerModal, { openModal,closeModal }] = useModal();
</script>

2、子传父

  方法一：暴露法，父级调用子级函数

案例一

//案例1：行内setup，子抛出函数后，父级接收定义后再调用

//子组件：
<script lang="ts" setup>
    defineExpose({
      PayShow: PayShow;  //前面是抛出的名字，后面是具体内容
    });
    async function PayShow() {
      onlinePaymentVisible.value = true;
      nextTick(() => {
        BillOfCreditInput.value.focus();
      });
    }
</script>

//父组件：
<template>
 <div>
 //ref="payFall"  —— 父级引入的子组件实例化中写
    //②子组件实例化
 	<FcFundsLkPay ref="payFall" @success='handleSuccess' @close="closeModal"/>
  </div>
</template>
<script lang="ts" name="fee-fcFundsLk" setup>
    //①引入子组件
 import FcFundsLkPay from './components/FcFundsLkPay.vue';
	//③定义类型
 const payFall=ref<InstanceType<typeof FcFundsLkPay>>();
   //④获取/使用 子组件的方法/属性
 function PayShow(){
    payFall.value?.PayShow();
  }
</script>

案例二

//案例2:setup()函数，直接调用子级函数

//子级，定义函数并抛出
export default {
    setup(props, context) { 
         async function openModal(val) {  //①--子定义函数
            checkStatus.value=val.checkStatus;
            trayTable.loading = true;
            show.value = true;
            goodsLotRow.value = val;
            let canSelectTrayList = await canSelectTrayListApi(goodsLotRow.value.goodsLotSn);
            trayTable.loading = false;
            }
        }
        return {
                openModal,  //②--子抛函数
            };
	}
}
//父级
//引入子级
//ref="TrayModalRef"  —— 父级引入的子组件实例化中写
    //②子组件实例化
<template>
  <ReleaseTrayWareModal ref="TrayModalRef" @addTrayList="addTrayList" />
</template>
<script lang="ts" setup>
  //①引入子组件
  import ReleaseTrayWareModal from './components/ReleaseTrayWareModal.vue';
  //板号选择 托盘选择
  const TrayModalRef = ref(); //③定义类型
  const releaseDetailRowId = ref();
  function openTrayModal(p) {
    let { id } = p;
    releaseDetailRowId.value = id;
    if (p.weightKg == null || p.weightKg <= 0) {
      message.warn('请先输入件重');
    } else {
      TrayModalRef.value.openModal(p); //④获取/使用 子组件的方法/属性
    }
  }
</script>

方法二：子传值给父

子传值给父，父再用函数接了之后，调用子级的值（父级调用子级传参）

//子组件 -- 传值
//context.emit('参数名',值) 
context.emit('addTrayList', trayTableRef.value.getSelectedData());  //--①子传值

//父组件 -- 接收
  //@子组件的传的参数名='父级函数名'
  //function 父级函数(list) -- 调用值,list为子级具体传过来的值
<template>
  <ReleaseTrayWareModal ref="TrayModalRef" @addTrayList="addTrayList" />  //--②父引入
</template>
<script lang="ts" setup>
 function addTrayList(list) {  //--③父级函数接值
      billInfo.releaseDetailList.map((val) => {
          if (val.id === releaseDetailRowId.value) {
              val.releaseTray = list.length;  //--④父级函数使用子的值
              val.deliveryBoard = list.length;
              let releaseQuantity = 0;
              let sumWeightKg = 0;
              list.forEach((i) => {
                  releaseQuantity += i.releaseQuantity;
                  sumWeightKg += i.sumWeightKg;
              });
              traySn.value = list.map((i) => i.traySn);
              val.traySnList = list.map((i) => i.traySn);
              val.releaseQuantity = releaseQuantity;
              val.inventoryKg = sumWeightKg;
              val.lkReleaseDetailTrayList = list;
          }
      });
}