uni-app props不能传递function的问题

  1. 第一种方式,通过子组件 e m i t 触 发 , 不 管 嵌 套 多 少 层 , 只 要 每 层 子 组 件 都 触 发 emit触发,不管嵌套多少层, 只要每层子组件都触发 emitemit,并将传递参数,则父组件总能接受到方法执行的命令,并按照你的需求执行
  2. 通过$parent在子组件中拿到父组件的方法,但是注意调用时,需采用call,apply,bind等方式,对方法进行this指定,防止方法中的this指向有误。
    例:
// 父组件
    load (start, offset) {
      return this.$http.post({
        urlKey: 'history',
        params: {
          start,
          offset
        }
      }).then(res => {
        if (res && res.success) {
          return {
            list: res.result || []
          }
        } else {
          return {
            list: []
          }
        }
      })
    },
// 子组件

toPage (pageIndex, params) {
      this.pageIndex = pageIndex
      this.params = params
      let hander = this.load
      if (!hander) {
        hander = this.$parent.load
      }
      return hander.call(this.$parent, pageIndex, this.pageSize, params).then(({ list }) => {
        this.isEmpty = false
        if (this.pageIndex === this.initPageIndex) {
          this.list = []
        }
        if (list.length < this.pageSize) {
          this.finished = true
        }
        if (list.length === 0 && this.pageIndex !== this.initPageIndex) {
          this.finished = true
        } else if (this.pageIndex === this.initPageIndex && list.length === this.pageSize) {
          this.list = list
          this.finished = false
        } else if (this.pageIndex === this.initPageIndex && !list.length) {
          this.isEmpty = true
          this.finished = true
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
      }).finally(() => {
        this.loading = false
      })
    },

父组件中load方法打印this子组件直接执行
undefined

冗余描述:

hander = this.$parent.load
hander.call(this.$parent, pageIndex, this.pageSize, params).then(({ list }) => {
其实call的时候,传递的参数给到hander,参数(pageIndex, this.pageSize, params)是属于当前环境下的,只是将this指向,指了一下父级,在父级能拿到$http这个方法,而单纯hander方法是没有this的,$http就会报错。

此后的then还是继续拿着当前方法的this指向在运作。

另:
Promise().then()既然返回的是一个Promise对象, 那么then()中应该有类似于Promise((resolve, reject)=>{})中的resolve和reject的参数,以便向后传递继续(when resolved)或者中断(when rejected)的信息. 但是, then()中只接受两个函数:handleFulfilled,handleRejected, 并且这两个函数中的参数只有一个, 就是上一个Promise中resolve出来的或reject出来的.

解决方法:.then()中使用returnthrow
任何不是 throw 的终止都会创建一个"已决议(resolved)"状态,而以 throw 终止则会创建一个"已拒绝"状态。

所以父组件中then后的return,其实相当于在 promise中使用了 resolve或 reject,给到了下一个使用其方法的then的值。

再总结一下:
直接通过hander = this.$parent.load,拿到的hander,是没有this的。
所以call就是让父组件的方法 在子组件中能够顺利执行,入参以及then之后的处理参数,都跟父组件没关系,
所以,如果只针对上述load方法 hander.call(this.$parent,也可以只换成this,毕竟$http是挂全局的
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值