美文网首页
小程序父组件调用子组件中的方法 且子组件返回成功后继续执行父组件

小程序父组件调用子组件中的方法 且子组件返回成功后继续执行父组件

作者: vivianXIa | 来源:发表于2020-05-19 23:05 被阅读0次

    前言:开始想了好久,怎样才能让父组件调用子组件的方法,且要让子组件的方法执行成功后返回才继续调用父组件的方法,想了下为何不用promise呢
    —————————————————————————————
    20200526 其实可以用子元素回调父元素的方法,当时一下子没想到

    父组件调用子组件的方法

    方法一:使用promise

    //json文件中引入子组件
    "usingComponents": {
          "qs-naire": "/components/healthQsN/healthQsN"
    }
    //wxml中引入组件
    <view class="naire">
        <qs-naire id="naire"></qs-naire>
    </view>
    //父组件的js
    let hasFinishNaire = this.selectComponent('#naire').naireForm();
    if(!hasFinishNaire){return false}
     //调用组件的方法
    let a = await that.selectComponent('#naire').submitSaveNaire();
    if(a.data.backCode==0){
            that.confirmSend(params);
     }
    
    
    //子组件中的方法return promise+++++++++++++++++++++++++++++++++++++++++++
     //调用接口提交
        submitSaveNaire() {
          let params = {
            applyOwid: wx.getStorageSync("applyOwid"), //申请表owid 
            }
          return new Promise(function (resolve, reject) {
          //这里是自己封装的请求方法 可以用一般的请求方法代替
            common.ajax('zustswyt/bckjBizBm/healthMemo', params, function (res) {
              if (res.data.backCode == 0) {
                resolve(res);
              } else {
                reject(res);
                common.toast(res.data.errorMess, 'none', 2000)
              }
            });
          });
        },
    
    注意:在小程序中使用promise 需要在本地设置中增加编译,否则会报错
    image.png

    方法二 子元素回调父元素

    //子组件
    this.triggerEvent('callSomeFun', value)
    
    //父元素
    <component bind:callSomeFun="parentFun"></component>
    

    相关文章

      网友评论

          本文标题:小程序父组件调用子组件中的方法 且子组件返回成功后继续执行父组件

          本文链接:https://www.haomeiwen.com/subject/pkcwohtx.html