Vue 使用$listeners触发自定义事件实现子组件给父组件传递数据

定义事件

<template>
    <div>
    	<!-- aaaa 自定义事件名 -->
        <MyTest @aaaa="handleClick"></MyTest>
    </div>
</template>

<script>
    import MyTest from "@/components/MyTest/index"
    export default {
        name: "test",
        components: {
            MyTest,
        },
        methods: {
            handleClick(page){
                console.log("父组件",page)

                return new Promise((resolve)=>{
                    setTimeout(()=>{
                        resolve("aaaaaa")
                    },3000)
                })
            }
        }
    }
</script>

触发事件

<template>
    <div>
        <button @click="handleClick()">点击一下</button>
    </div>
</template>

<script>
    export default {
        name: "index",
        methods: {
            async handleClick() {
                console.log("子组件")
                // 触发事件
                if (this.$listeners.aaaa) {
                    const res = await this.$listeners.aaaa(1)
                    console.log(res)
                }
                console.log("子组件end")
            }
        }
    }
</script>