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

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

作者: 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