vue实现子父组件之间通信

<template>
    <div>
        <button @click="handleClick" :disabled="isLoading">
            {{ isLoading ? "loading" : "submit" }}
        </button>
        <div class="err">{{ error }}</div>
    </div>
</template>
<!-- 
    实现子组件向父组件发起通信，父组件完成通信后，子组件在向下执行
    第一种方法：使用$emit()多个参数，整个回调函数，然后在父组件完成后，进行回调
    第二种方法：使用$listeners 
    $emit和$listeners区别：
        $emit符合单向数据流，子组件发出通知，父组件监听;$listeners在子组件直接使用父组件的方法（类似与函数）
        $emit受调试工具监控$listeners不受调试工具监控
        $listeners获取传递过来方法，因此调用方法可以知道返回值。但是$emit仅仅向父组件发送通知，操作都是由父组件完成，子组件无法进行参与，也就不知道父元素处理的结果，除非父元素返回结果

 -->
<script>
export default {
    data() {
        return {
            count: 0,//点击次数
            isLoading: false,
            error: 'aaa',
        }
    },
    methods: {
        //第一种使用$emit来形成通信方式
        // handleClick(){
        //         /*点击次数 +1  
        //           错误消息清空
        //           为了防止重复点击，将isloading设置true
        //           通知父组件，{我被点击了}，并传递当前点击次数
        //           等待父组件处理（可能是异步），将父组件处理结果设置到error
        //         */
        //        this.count++;
        //        this.error='';
        //        this.isLoading=true;
        //        this.$emit('click',this.count,(error)=>{
        //         this.isLoading=false;
        //         this.error= error
        //        });

        //第二种使用$listeners来形成通信方式
    async handleClick() {
            /*点击次数 +1  
              错误消息清空
              为了防止重复点击，将isloading设置true
              通知父组件，{我被点击了}，并传递当前点击次数
              等待父组件处理（可能是异步），将父组件处理结果设置到error
            */
            this.count++;
            this.error = '';
            this.isLoading = true;
             const result =  await this.$listeners.click(this.count);
             this.isLoading = false;
            this.error = result;
        
        }
    }
}
</script>

<style></style>