- 第一种方式,通过子组件 e m i t 触 发 , 不 管 嵌 套 多 少 层 , 只 要 每 层 子 组 件 都 触 发 emit触发,不管嵌套多少层, 只要每层子组件都触发 emit触发,不管嵌套多少层,只要每层子组件都触发emit,并将传递参数,则父组件总能接受到方法执行的命令,并按照你的需求执行
- 通过$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
})
},
冗余描述:
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()中使用return和throw
任何不是 throw 的终止都会创建一个"已决议(resolved)"状态,而以 throw 终止则会创建一个"已拒绝"状态。
所以父组件中then后的return,其实相当于在 promise中使用了 resolve或 reject,给到了下一个使用其方法的then的值。
再总结一下:
直接通过hander = this.$parent.load,拿到的hander,是没有this的。
所以call就是让父组件的方法 在子组件中能够顺利执行,入参以及then之后的处理参数,都跟父组件没关系,
所以,如果只针对上述load方法 hander.call(this.$parent,也可以只换成this,毕竟$http是挂全局的