有时候业务上子组件没有loading, 由父组件统一管理一个loading, 只要子组件触发异步接口, 就需要通知父组件loading.

思路

父组件会持有一个loadingNum属性, 记录正在loading的子组件的数量

data() {
  return {
    loadingNum: 0
  }
},

真正的loading则作为计算属性, loadingNum为0返回false, 否则返回true

  computed: {
    loading() {
      return this.loadingNum
    }
  },

父组件还会提供一个方法changeLoading给子组件, 子组件只需要调用这个方法就可以了, 不用关心父组件做了什么操作

  changeLoading(value) {
    if (value) return this.loadingNum++

    this.loadingNum <= 0 ? this.loadingNum = 0 : this.loadingNum--
  }

子组件使用

async getData() {
  this.changeLoading(true)
  ...
  this.changeLoading(false)
}