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监听怎么实现”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！