<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>
标签:count,vue,子父,点击,isLoading,error,组件,true From: https://www.cnblogs.com/wsx123/p/17479181.html