vue父子组件事件的回调

目标1：父调用子组件的事件无参数，父事件执行完回调子组件事件。

目标2：父调用子组件的事件有参数，父事件执行完回调子组件事件。

一、准备工作

1.1、创建组件：

<template id="btnid" title="按钮">
    <button type="button" v-on:click="toClick('test')" v-bind:disabled="loading" class="btn btn-primary  btn-sm">
        <span v-if="!loading" title="可用状态"> <i :class="icon"></i></span>
        <span v-else title="禁用状态"><i class="fa fa-spinner fa-pulse"></i></span>
        {{text}}
    </button>
</template>

注意：其中toClick('test')中了参数  test。

二、实现方法

2.1 、目标1：父调用子组件的事件无参数，父事件执行完回调子组件事件

<script>
    //save是组件名称
    Vue.component("save", {
        template: '#btnid',
        props:……,
        methods: {
            /*  item是子组件传来的参数,本例中传值是：test  */
            toClick(item) {
                this.loading = true;
                this.$emit('chileSave', { a:"子组件传给父组件的参数" } , function (res) {
                        //这是回调函数
                        alert(res);
                    }
                });
             
        }
    });
</script>

父组件使用：

<save v-on:chileSave="SaveFunc" text="" icon="fa fa-save"></save>

new Vue({
  methods:{
      //子组件调用此函数
      SaveFunc(item,callback) {
         //item是子组件传来的参数
         //callback是回调函数
      }
  }
})

2.2、目标2：父调用子组件的事件有参数，父事件执行完回调子组件事件

<script>
    Vue.component("save", {
        template: '#btnid',
        props:……,
        methods: {
            /*  item是子组件传来的参数,本例中传值是：test  */
            toClick(item) {
                this.loading = true;
                this.$emit('chileSave', 
                   { 
                      //子传给父的参数
                      a:"子组件传给父组件的参数", 
                      //回调函数
                      callback:function (res) {
                           //这是回调函数
                           alert(res);
                       } 
                   } 
                });
             
        }
    });
</script>

 父组件使用：

<save v-on:save="Save($event,{p:"1"})" text="" icon="fa fa-save"></save>

new Vue({
  methods:{
      //子组件调用此函数
      SaveFunc(chile,paras) {
          //paras是父组件传来的参数
         //chile是子组件的参数，其中包含回调函数，chile.callback是回调函数
      }
  }
})

注意：目标2也可以使用 Promise实现。