listeners和v-model{{msg}}

  

    
    
  




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



#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;
}

    

        
            {{ isLoading ? "loading" : "submit" }}
        
        
{{ error }}
    



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