仓库组件（全部显示，按主体的仓库显示，回显仓库）

1. 父传子；父组件通过:purchaserIdProps=“SDEditlForm.sellerId”，子组件用props接收
2. 子传父： 子组件this.$emit(‘input’, ‘xxx’)，父组件用@input接收
3. watch监听（用于回显）
4. @focus=“clickWarehouseId”；input输入框，主要通过foucs事件触发接口
5. if (this.warehouseId) return；判断如果有值，则不触发，防止多次掉接口减少性能消耗
6. disabled: Boolean；:disabled=“disabled”

<template>
  <!--
  value:回显的仓库id 
  purchaserIdProps:回显的主体id 
  <PgWarehouse v-model="SDEditlForm.warehouseId" :purchaserIdProps="SDEditlForm.sellerId" clearable disabled></PgWarehouse>
  -->
  <div>
    <gdb-select v-model="warehouseId" placeholder="请选择主体" :clearable="clearable"  :disabled="disabled" @change="changeWarehouseId"  @focus="clickWarehouseId">
      <gdb-option v-for="item in warehouseList" :value="item.id" :key="item.id" :label="item.caption"></gdb-option>
    </gdb-select>
  </div>
</template>

<script>
import '/http/axios'
import $http from '/http/http'
import Api from '/config/api'

export default {
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    purchaserIdProps: {
      type: [String, Number],
      default: ''
    },
    disabled: Boolean,
    clearable: Boolean
  },
  data() {
    return {
      warehouseId: '',
      warehouseList: [],
      getWarehouseData: {}
    }
  },
  watch: {
    value(newVal) {
      if (!newVal) {
        this.warehouseId = ''
        this.$emit('input', '')
        this.$emit('select', '')
      } else if (newVal && this.purchaserIdProps) {
        if (this.warehouseId) return
       // 按主体的仓库回显
        this.warehouseId = this.value
        this.getWarehouseData.companyId = this.purchaserIdProps
        this.getWarehouseList()
      } else {
        if (this.warehouseId) return
      // 仓库回显
        this.warehouseId = this.value
        this.getWarehouseList()
      }
    }
  },
  methods: {
    getWarehouseList() {
      $http
        .get({
          url: Api.getWarehouseList,
          data: this.getWarehouseData
        })
        .then(res => {
          this.warehouseList = res.data.data
        })
    },
    changeWarehouseId() {
      this.$emit('input', this.warehouseId)
      this.$emit('select', this.warehouseId)
    },
    clickWarehouseId() {
      if (this.warehouseId) return

      this.getWarehouseList()
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {}
}
</script>

<style lang='scss' scoped>
</style>

后续问题

1. 组件赋值；第一次赋值不触发watch；
   解决问题：mounted打印出value，发现有值；而监听打印没有值则问题出在watch

  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        if (!newVal) {
          this.warehouseId = ''
          this.$emit('input', '')
          this.$emit('select', '')
        } else if (newVal && this.purchaserIdProps) {
          if (this.warehouseId) return
          this.warehouseId = this.value
          this.getWarehouseData.companyId = this.purchaserIdProps
          this.getWarehouseList()
        } else {
          if (this.warehouseId) return
          this.warehouseId = this.value
          this.getWarehouseList()
        }
      }
    }
  },