watch監聽怎么實現

本篇內容主要講解“watch監聽怎么實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“watch監聽怎么實現”吧!

父傳子；父組件通過：purchaserIdProps=“SDEditlForm.sellerId”，子組件用props接受

watch監聽（用于回顯）

@focus=“clickWarehouseId”；input輸入框，主要通過foucs事件觸發接口

if （this.warehouseId） return；判斷如果有值，則不觸發，防止多次掉接口減少性能消耗

disabled: Boolean；：disabled=“disabled”

<template>

  <!--

  value:回顯的倉庫id 

  purchaserIdProps:回顯的主體id 

  <PgWarehouse v-model="SDEditlForm.warehouseId" :purchaserIdProps="SDEditlForm.sellerId"></PgWarehouse>

  -->

  <div>

    <gdb-select v-model="warehouseId" placeholder="請選擇主體" clearable @change="changeWarehouseId" :disabled="disabled" @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

  },

  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>

到此，相信大家對“watch監聽怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！