背景

小程序里內(nèi)嵌的h5單頁，框架用的vant3，做選擇彈窗的時候封裝了一個組件，彈窗里選擇支付方式，點(diǎn)擊確定觸發(fā)confirm方法。

// 組件內(nèi)容
<template lang="pug">
VanDialog(v-model:show='showDialog', title='支付方式', show-cancel-button, @cancel='showDialog = false', @confirm='handleSubmit')
    .pt-4.pb-10.px-8
            .brs-8.bgc-html.mt-6.py-4.px-6.flex.aic.jcb(
            v-for='(item, index) in payList',
            :key='index',
            :class='item.value === payType ? "c-theme" : "c-disabled"',
            @click='payType = item.value'
        )
            .fwb {{ item.label }}
            .iconfont {{ item.value === payType ? "&#xe67f;" : "&#xe72f;" }}
</template>

// 頁面內(nèi)容
ChoosePayType(v-model="showDialog" @confirm="handleSubmit")

const handleSubmit = async (payType: string) => {
    try {
        const { res } = await confirmOrder({ regAppointmentId: orderId.value, payType });
        if (res) {}
    } catch (error) {
        console.log(error);
    }
};

問題

在h5里面表現(xiàn)良好，handleSubmit方法觸發(fā)一次，可是發(fā)到測試之后在小程序里打開發(fā)現(xiàn)handleSumit觸發(fā)了兩次。
調(diào)試之后發(fā)現(xiàn)是由于我的組件里VanDialog放在了根路徑上，跟vandialog本身的事件名稱一樣，所以掛載了兩次confirm事件。。。

解決方案

1. 把confirm事件改為onConfirm
2. 根路徑加一個div