一、子组件使用defineProps和defineEmits

用defineProps来定义props来接收父组件传给子组件的值；

用defineEmits来定义emits来把子组件的数据传给父组件。

1、在子组件中进行如下定义

const props = defineProps({
  id: {
    type: String,
    default: "0",
  },
  rowId: {
    type: String,
    default: "0",
  }
});
const emits = defineEmits(['testEmitSendDataEvent']);
let test = () => {
  emits("testEmitSendDataEvent", '参数送过来了，父组件，查收一下');//第一个是在父组件中定义的方法，第二个是传递参数
};

二、在父组件中对子组件进行引入和使用

            <div>
                <PaymentRequestPage :id="paymentRequestId" :rowId="paymentRequestRowId" @testEmitSendDataEvent="testEmitSendDataEventGetData"></PaymentRequestPage>
            </div>
            <div>
                <PenaltyRequestPage :id="penaltyRequestId" :rowId="penaltyRequestRowId" @testEmitSendDataEvent="testEmitSendDataEventGetData" ></PenaltyRequestPage>
            </div>

父组件使用的 :id, :rowId 这2个props都是在子组件中定义好的rops。

父组件使用的 @testEmitSendDataEvent 这个也是子组件定义好Emits。

父组件还需要一个获取对应Emits传值回来的接收方法。本例子中使用的是：testEmitSendDataEventGetData 这个方法。

下面就是父组件中这个方法定义的内容。

let testEmitSendDataEventGetData = (obj) => {
    console.log("testEmitSendDataEventGetData:" + JSON.stringify(obj));
}


三、子组件如何处理父组件通过props传来的值

1、比如可以在onMounted中使用获取的值进行各种数据请求和处理。


onMounted(() => {
  console.log("props:"+JSON.stringify(props)) //输出父组件通过传过来的参数
  if ("0" != props.id) {
    getPaymentRequestById({id: props.id}).then((res)=>{
      paymentRequestForm.id=res?.data?.id||'';
      paymentRequestForm.requestDate=res.data.requestDate;
      paymentRequestForm.payee=res.data.payee;
      paymentRequestForm.payeeAddress=res.data.payeeAddress;
      paymentRequestForm.bankName=res.data.bankName;
      paymentRequestForm.account=res.data.account;
      paymentRequestForm.paymentAmount=res.data.paymentAmount;
      paymentRequestForm.paymentPurpose=res.data.paymentPurpose;
    });
  } else {
    
  }

});


四、子组件通过方法来调用Emits来把需要的值传给父组件

1、比如可以定义一个按钮来触发js函数方法，在方法里使用emits来把值传递给父组件。

    <el-divider></el-divider>
    <div style="display:flex;justify-content: flex-end;">
      <el-button type="primary" @click="test">测试</el-button><el-button type="primary" @click="handleSavePaymentRequest">保存</el-button><el-button type="primary" v-print="'#printPaymentRequestForm'">打印</el-button>
    </div>
    <el-divider></el-divider>
    <div id="printPaymentRequestForm" style="border:1px solid white;">
      <PaymentRequestFormPrint />
    </div>

这个案例中使用定义的test方法。由按钮触发test函数，在这个test函数内使用emits来向父组件进行传值。第一个参数是父组件里绑定的Emits的ID标识，第二个参数是要传给父组件的值。

const emits = defineEmits(['testEmitSendDataEvent']);
let test = () => {
  emits("testEmitSendDataEvent", '参数送过来了，父组件，查收一下');//第一个是在父组件中定义的方法，第二个是传递参数
};


五、使用效果

 使用方法如下哦，在子组件上点击测试按钮。在父组件的Emits对应ID标识的接收方法就会获取到子组件传过来的值。

vue3父子组件传值props,emits_ide