通过使用.sync
来实现prop值的更新
父组件
<CommodityType :value.sync="data.Attributes"></CommodityType>
子组件代码
/**
* @Author: 858834013@qq.com
* @Name: CommodityType
* @Date: 2022-01-18
* @Desc: 物料属性
*/
<template>
<div>
<div @click="getshow">
<div class="userInfo1">
<div class="userInfoName">
<text>物料属性</text><text class="red">*</text>
</div>
<div class="bodys">
<input :value="value.KeyName" disabled="" type="text" placeholder="请选择"
placeholder-style="font-size:32rpx;color: #D5D5E0;" />
<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/static/icon_right.png"
mode="widthFix"></image>
</div>
</div>
</div>
<u-picker :title="title" :show="show" @cancel="show=false" @confirm="getConfirm" :columns="list"></u-picker>
</div>
</template>
<script>
import {
CommandGetDicListByType
} from '@/config/api.js'
export default {
name: 'CommodityType',
props: {
value: {
type: Object | String,
default () {
return {}
}
},
},
data() {
return {
show: false,
BelongId: '',
datalist: [],
list: [
[]
]
};
},
mounted() {
this.BelongId = JSON.parse(uni.getStorageSync('userData')).BelongId
this.getdata()
},
methods: {
getshow() {
this.show = true
},
getConfirm(e) {
var that = this;
var data = {
Id: that.datalist[e.indexs[0]].Id,
KeyCode: that.datalist[e.indexs[0]].KeyCode,
KeyName: that.datalist[e.indexs[0]].KeyName,
}
console.log(that.value)
that.$emit("update:value", data);
this.show = false
},
getdata() {
var that = this;
that.list[0] = [];
that.datalist = []
CommandGetDicListByType({
params: {
BeLongId: that.BelongId,
DType: 'CommodityType',
},
custom: {
auth: true
}
}).then(res => {
if (res.Code == 200) {
that.datalist = res.Data
that.datalist.forEach((type) => {
that.list[0].push(type.KeyName)
});
}
}).catch(err => {
})
}
}
}
</script>
<style lang="scss" scoped>
.userInfo1 {
width: 630rpx;
min-height: 157rpx;
background: rgba(216, 216, 216, 0);
box-shadow: 0px 1rpx 0px 0px #F2F2F2;
margin: 0 auto;
.bodys {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
image {
width: 32rpx;
}
}
.userInfoName {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
padding-top: 32rpx;
text {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #151852;
}
.red {
font-size: 24rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FF5252;
margin-top: -15rpx;
}
}
.userInfoName2 {
text {
color: #BABBCB;
}
.red {
color: #FFD0CF;
}
}
input {
margin-top: 8rpx;
color: #474A77;
font-size: 32rpx;
z-index: 1;
position: relative;
}
.disabled {
color: #C8C8D6;
}
}
</style>