listeners和v-model

<template>   <div id="app">     <LoadingButton @click="handlesClick"></LoadingButton>     <ceShi2></ceShi2>   </div>
</template>
<script> import LoadingButton from '@/components/demo/LoadingButton' import ceShi2 from '@/components/demo2/index.vue' export default {   name: 'App',   components: {     LoadingButton,ceShi2   },   methods:{     //目的：父组件向子组件发起通信，父组件完成后，子组件在进行执行     //第一种使用$emit来形成通信方式     // handlesClick(count,callback){     //   console.log(count)     //   setTimeout(()=>{     //     callback("请填写账号")     //   },3000)     // }
    //第二种使用$listeners    async handlesClick(count){       return new Promise((resolve)=>{         setTimeout(()=>{           resolve('成功次数:'+ count)         },1000)       })     }   } } </script>
<style> #app {   font-family: Avenir, Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

<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>

　　v-model：实现数据双向绑定