当多个组件渲染数据冲突解决方法

<template>
	<!-- 
	  @descirption购物车商品组件
	  @statrTiem 2022/10/19
	 -->
	<view :id="'ids' + ids ">
		<view class="yh-cart-row">
			<!-- 商品列表 S -->
			<view class="packs">
				<!-- 头部的 店铺名 -->
				<view class="carrier">
					<view class="shop">
						<view class="left">
							<image class="select" :src="shopItem.is_selected == 0 ? selectDefault :selectPitchOn "
								mode="widthFix" @click="handelChangeState(shopItem.is_selected,shopItem.shop_id)"></image>
							<!-- <image v-if="!item.isShop" class="select" :src="selectDefault" mode="widthFix"></image> -->
							<!-- <u-checkbox shape="circle" v-model="checkAll" @change="handelChangeState"></u-checkbox> -->
							<view class="shop-name">
								<view class="name">
									{{shopItem.shop_name}}
									
								</view>
							</view>
						</view>
					</view>

					<!-- 商品的名称 -->
					<view class="goods" v-for="(item, index) in shopItem.list" :key="index" >
						<!-- 这里是选择的 radio -->
						<view class="left">
							<image class="select" :src="item.is_selected == 0 ? selectDefault :  selectPitchOn"
								mode="widthFix" @click="handelChilrenChangeState(item.id,item.is_selected)"></image>
						</view>
						<view class="right">
							<image class="goods-image"
								:src="item.image || 'https://img0.baidu.com/it/u=3156137851,1307209439&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'">
							</image>
							<view class="goods-info">
								<view class="goods-name">
									{{item.goods_title}}
								</view>
								<view class="specification">

									<view class="right_msg">
										<!-- <view class="right_title">
											{{item.title}}
										</view> -->
										<view class="hotspc">

											<view class="hotwidth">
												<view class="minus">
													减
												</view>
												<view class="down">
													满39元减5元
												</view>
											</view>
											<view class="hot">
												<image style="width: 24rpx;
								 	height: 28rpx;" src="../../static/image/shop/hotmsg.png" mode=""></image>
												<view class="down">
													直降10.0
												</view>
											</view>
										</view>
										<view class="price">
											<view class="price_left">
												<text>￥</text>
												<text>{{item.price * item.num}}</text>
											</view>
											<view class="price_right">
												<view class="amount">
													<view class="num-minus" @click="addRedState = -1;handerClickSetShopNum(item.id)">
														-
													</view>
													<view class="input-price">
														{{item.num}}
													</view>
													<view class="num-add" @click = "addRedState = 1;handerClickSetShopNum(item.id)">
														+
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	let i = 0
	export default {
		name: "cartShopList",
		props: {
			/**
			 * 接收传递数组
			 * 以 item 为例
			 * */
			shopItem: {
				type: Object,
				default: []
			},
			shopTitle: {
				type: String,
				default: '测试'
			},
			shop_id: {
				type: Number | String
			},
			checkStateAll: {
				type: Number | String
			}

		},
		data() {
			return {
				ids: '',
				selectDefault: '../../../static/image/shop/radio1.png', //this.$mAssetsPath.iconDefault, // 默认图标
				selectPitchOn: '../../../static/image/shop/radio2.png',
				addRedState:0
			};
		},
		watch: {
			/**
			 * 
			 * @description 给商品添加选中默认状态
			 * */
			// shopItem: {
			// 	handler(newVal) {
			// 		newVal.forEach(item => item.flag = false)
			// 		console.log(this.shopItem, 'aaa')
			// 		console.log(newVal);
			// 		this.shopList = newVal
			// 	},
			// 	deep: true
			// }

		},
		methods: {
			// 全选派发事件
			async handelChangeState(state,id) {
				console.log(state+'状态',id+'id');
				this.$emit('handelChangeState',{state,id})
			},


			/**
			 * @description  子的反选派发事件
			 * */
			handelChilrenChangeState(id,state) {
				this.$emit('handelChilrenChangeState',{id,state})
			},
			
			
			/**
			 * @desctrption 增加 减少派发事件
			 * 
			 * */
			 handerClickSetShopNum(id){
				 this.$emit('handerClickSetShopNum',{id,state:this.addRedState})
			 }
		},
		created() {
			i++
			this.ids = i
		}

	}
</script>

<style lang="scss" scoped>
	.yh-cart-row {

		// .carrier:last-child {
		// 	border-bottom: none;
		// }
		.packs {
			background-color: #FFFFFF;
			border-radius: 14rpx;
			margin: 0 20rpx;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;

			.carrier {

				.shop {
					display: flex;
					align-items: center;
					padding: 23rpx 0;
					margin: 0 20rpx;
					border-bottom: 1rpx solid #e6e6e6;

					.left {
						display: flex;
						align-items: center;

						.select {
							width: 44rpx;
							height: 44rpx;
							margin-right: 39rpx;
						}

						.shop-name {
							display: flex;
							align-items: center;

							.icon-shop {
								width: 42rpx;
								margin-right: 10rpx;
							}

							.name {
								font-size: 30rpx;
								font-weight: 600;
							}
						}
					}

					.right {
						width: 30rpx;
						margin-left: 10rpx;
					}
				}

				.goods {
					display: flex;
					align-items: center;
					// position: relative;
					margin: 0 20rpx;
					margin-top: 30rpx;

					.left {
						.select {
							width: 44rpx;
							height: 44rpx;
							margin-right: 36rpx;
						}
					}

					.right {
						display: flex;
						align-items: center;
						z-index: 2;

						.goods-image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 14rpx;
							margin-right: 20rpx;
						}

						.goods-info {
							width: 450rpx;

							.goods-name {
								width: 400rpx;
								font-size: 28rpx;
								color: #000000;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.specification {
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-top: 13rpx;


								.right_msg {
									flex: 1;

									.right_title {
										font-size: 28rpx;
										color: #000000;
									}

									.hotspc {
										display: flex;
										align-items: center;

										.hotwidth {
											display: flex;
											align-items: center;
											// width: 150rpx;
											// height: 28rpx;
											border: 1rpx solid #e93853;
											border-radius: 4rpx;
											line-height: 28rpx;
											text-align: center;

											.minus {
												width: 24rpx;
												height: 28rpx;
												background: #e93853;
												text-align: center;
												line-height: 28rpx;
												font-size: 20rpx;
												color: #ffffff;
											}

											.down {
												font-size: 20rpx;
												color: #e93853;
												margin-left: 6rpx;

											}

										}

										.hot {
											margin-left: 10rpx;
											margin-right: 10rpx;
											display: flex;
											align-items: center;
											// width: 121rpx;
											// height: 28rpx;
											border: 1rpx solid #e93853;
											border-radius: 6rpx;
											line-height: 28rpx;
											text-align: center;

											.down {
												font-size: 20rpx;
												color: #e93853;
												margin-left: 10rpx;
											}
										}
									}

									.price {
										display: flex;
										align-items: center;
										justify-content: space-between;
										margin-top: 12rpx;

										.price_left {
											text:nth-child(1) {
												font-size: 22rpx;
												color: #e93853;
											}

											text:nth-child(2) {
												font-size: 35rpx;
												color: #e93853;
												font-weight: 600;
											}
										}

										.price_right {
											.amount {
												display: flex;
												align-items: center;
												height: 40rpx;
												// border: 1rpx solid skyblue;

												.num-minus,
												.num-add {
													width: 40rpx;
													text-align: center;
												}

												.num-minus {
													height: 40rpx;
													border-right: 1rpx solid #F5F5F5;
													background-color: #F5F5F5;
												}

												.num-add {
													height: 40rpx;
													background-color: #F5F5F5;
													border-left: 1rpx solid #F5F5F5;
												}

												.input-price {
													width: 60rpx;
													text-align: center;

												}
											}


										}
									}
								}


								// .specification-image {
								// 	width: 25rpx;
								// 	margin-left: 10rpx;
								// }
							}


						}

					}
				}

				.carrier-title {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 30rpx 30rpx;

					.goods-lose-efficacy-num {
						font-size: green;
						font-weight: 600;
					}

					.goods-lose-efficacy-operation {
						font-size: 12rpx;
						padding-top: 4rpx;
						color: blue;
					}
				}
			}
		}
	}
</style>