vue 子组件同步更新父组件的值

vue yekong

通过使用.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>

喜欢