uniapp 组件获取两个异步值确保两个值均存在

uniapp在封装组件时需要传递两个异步获取的值，当两个值均存在时需要进行编辑回显操作，

例如如下的一个组件：

javascript 复制代码

<template>
  <view class="picker-comp">
    <picker :range="range" :range-key="rangeKey" :value="innerValue" @change="handleChange" :disabled="isDisabled">
      <view class="text-content">
        <text v-if="text" :style="{opacity: isDisabled ? '0.6' : '1'}">{{text}}</text>
        <text v-else>{{ placeholder }}</text>
        <!-- <slot></slot> -->
      </view>
      
    </picker>
  </view>
</template>

<script>
  export default {
    props: {
      isDisabled: {
        type: Boolean,
        default: false
      },
      range: {
        type: Array,
        required: true
      },
      rangeKey: {
        type: String,
        default: ''
      },
      rangeValue: {
        type: String,
        default: ''
      },
      value: {
        type: [Number, String],
        default: ''
      },
      placeholder: {
        type: String,
        default: '请选择'
      }
    },
    computed: {
      bothValuesExist() {
        if(this.value && this.range && this.range.length) {
          return true
        } else {
          return false
        }
      }
    },
    watch: {
      bothValuesExist: {
        handler(newVal) {
          if(newVal) {
            if(this.rangeValue) {
              const obj = this.range.find(item => item[this.rangeValue] == this.value)
              this.text = obj && obj[this.rangeKey]
            } else {
              this.text = this.value
            }
            
          }
        },
        immediate: true
      }
    },
    data() {
      return {
        innerValue: '',
        text: '',
      }
    },
    methods: {
      handleChange(e) {
        const newValue = e.mp.detail.value;
        this.innerValue = newValue;
        if(this.rangeValue) {
          this.$emit('input', this.range[newValue][this.rangeValue]);
          this.text = this.range[newValue][this.rangeKey]
        } else {
          this.$emit('input', this.range[newValue]);
          this.text = this.range[newValue]
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .text-content {
    text-align: right;
    font-size: 16px;
    color: #666;
    padding: 0 10px;
    text {
      padding: 0 8px;
    }
  }
</style>

应为computed只要值发生改变会重新计算新值，所以我们直接在computed内部将两个异步值进行判断，最后watch计算后的新值即可。

核心代码

javascript 复制代码

computed: {
  bothValuesExist() {
    if(this.value && this.range && this.range.length) {
      return true
    } else {
      return false
    }
  }
},
watch: {
  bothValuesExist: {
    handler(newVal) {
      if(newVal) {
        if(this.rangeValue) {
          const obj = this.range.find(item => item[this.rangeValue] == this.value)
          this.text = obj && obj[this.rangeKey]
        } else {
          this.text = this.value
        }
        
      }
    },
    immediate: true
  }
},

参考代码

javascript 复制代码

computed:{
   tempA3(){
       const {a1,a2} = this
       retutn {a1,a2}
   }
},
watch:{
   tempA3:{
       handler(val){
           const {a1,a2} = val
           if(a1 && a2){
               this.initA3()
           }
       },
       deep: true
   }
}