Vue3 孙组件触发事件传值给祖父页面

Vue3 孙组件触发事件传值给祖父页面

孙组件<template><div v-if="show" @click="showPicker = true"><van-icon name="play" class="right-arrow" />{{ prov }}<van-icon name="play" /></div><!-- 省份选择 --><van-popup v-model:show="showPicker" round position="bottom"><van-picker title="请选择" value-key="name" :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" /></van-popup>
</template><script lang="ts" setup>
import { onMounted, ref } from 'vue'const emit = defineEmits(['on-confirm'])const prov = ref('全国')const info = defineProps({provinces: {type: String,default: () => {return {}},},
})const show = ref(true)onMounted(() => {if (info.provinces == '线路统计') {show.value = true} else {show.value = false}
})const showPicker = ref(false);const columns = [{ name: '全国', value: 0, postalCode: '', code: '' },// 23个省{ name: '广东', value: 0, postalCode: '440000', code: 44 },{ name: '青海', value: 0, postalCode: '630000', code: 63 },{ name: '四川', value: 0, postalCode: '510000', code: 51 },{ name: '海南', value: 0, postalCode: '460000', code: 46 },{ name: '陕西', value: 0, postalCode: '610000', code: 61 },{ name: '甘肃', value: 0, postalCode: '620000', code: 62 },{ name: '云南', value: 0, postalCode: '530000', code: 53 },{ name: '湖南', value: 0, postalCode: '430000', code: 43 },{ name: '湖北', value: 0, postalCode: '420000', code: 42 },{ name: '黑龙江', value: 0, postalCode: '230000', code: 23 },{ name: '贵州', value: 0, postalCode: '520000', code: 52 },{ name: '山东', value: 0, postalCode: '370000', code: 37 },{ name: '江西', value: 0, postalCode: '360000', code: 36 },{ name: '河南', value: 0, postalCode: '410000', code: 41 },{ name: '河北', value: 0, postalCode: '130000', code: 13 },{ name: '山西', value: 0, postalCode: '140000', code: 14 },{ name: '安徽', value: 0, postalCode: '340000', code: 34 },{ name: '福建', value: 0, postalCode: '350000', code: 35 },{ name: '浙江', value: 0, postalCode: '330000', code: 33 },{ name: '江苏', value: 0, postalCode: '320000', code: 32 },{ name: '吉林', value: 0, postalCode: '220000', code: 22 },{ name: '辽宁', value: 0, postalCode: '210000', code: 21 },{ name: '台湾', value: 0, postalCode: '830000', code: 71 },// 5个自治区{ name: '新疆', value: 0, postalCode: '650000', code: 65 },{ name: '广西', value: 0, postalCode: '450000', code: 45 },{ name: '宁夏', value: 0, postalCode: '640000', code: 64 },{ name: '内蒙古', value: 0, postalCode: '150000', code: 15 },{ name: '西藏', value: 0, postalCode: '540000', code: 54 },// 4个直辖市{ name: '北京', value: 0, postalCode: '110000', code: 11 },{ name: '天津', value: 0, postalCode: '120000', code: 12 },{ name: '上海', value: 0, postalCode: '310000', code: 31 },{ name: '重庆', value: 0, postalCode: '500000', code: 50 },// 2个特别行政区{ name: '香港', value: 0, postalCode: '810000', code: 81 },{ name: '澳门', value: 0, postalCode: '820000', code: 82 }
]const onConfirm = (value: any, index) => {showPicker.value = false;const provinceId = `${value.postalCode}`prov.value = `${value.name}`emit('on-confirm',provinceId)
};</script><style lang="scss" scoped>
.right-arrow {transform: rotate(180deg);
}
</style>父组件<provinces-choose v-if="info.title && tabIndex == 1" :provinces="info.title" @onConfirm='clickfather'>let emit = defineEmits(['clickgrandfather'])const clickfather = (e) => {console.log(e, "2222222")emit('clickgrandfather', e)
}组父组件<card-title :info="lineModeStatis" :tabIndex="lineCur" @clickgrandfather='clickgrandfather' ></card-title>const clickgrandfather = (e)=>{console.log(e,"aaaaaaaaaa")}