watch监听怎么实现
本篇内容主要讲解“watch监听怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“watch监听怎么实现”吧!
成都创新互联是一家专业从事成都网站建设、成都做网站的网络公司。作为专业网站制作公司,成都创新互联依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务!
父传子;父组件通过:purchaserIdProps=“SDEditlForm.sellerId”,子组件用props接受
watch监听(用于回显)
@focus=“clickWarehouseId”;input输入框,主要通过foucs事件触发接口
if (this.warehouseId) return;判断如果有值,则不触发,防止多次掉接口减少性能消耗
disabled: Boolean;:disabled=“disabled”
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() {}
}
到此,相信大家对“watch监听怎么实现”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网站标题:watch监听怎么实现
标题路径:http://azwzsj.com/article/jchgdd.html