vue子组件中处理从父组件获取到的数据（uniapp商品列表组件）

使用监听函数监听子组件props中变量的变化，当变量值发生变化时，修改获取到的变量值，然后赋值给data中的
变量，最后将data中的变量值渲染到页面上完成组件页面渲染效果！

<template>
	<view class="product-list">
		<view class="item" v-for="(item,index) in productData" :key="index">
			<image :src="item.ThumbnailUrl160" mode="widthFix"></image>
			<text>{{item.ProductName}}</text>
			<view class="KeyWords">
				<text v-for="(i,index) in item.KeyWords" :key="index">{{i}}</text>
			</view>
			<view class="price">
				<view class="text"><text>￥</text>{{item.SalePrice}}</view>
				<image src="../static/icon/add.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"z-product-list",
		data() {
			return {
				productData : []
			};
		},
		props : {
			productList : {
				type:Array
			}
		},
		watch:{
			productList:function(newList){
				for(var item of newList){
					if(item.KeyWords != null){
						item.KeyWords = item.KeyWords.split(',')
					}
				}
				this.productData = newList
			}
		}
	}
</script>

<style scoped>
.product-list{
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.item{
	width: 48%;
	overflow: hidden;
	background-color: #fff;
	padding: 20rpx;
	margin-bottom:20rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	font-size: 28rpx;
	color: #666;
	line-height: 40rpx;
	position: relative;
}
.item > text{
	text-overflow: ellipsis;
	overflow: hidden;
	line-clamp: 2;
	height: 80rpx;
}
.item image{
	width: 100%;
}
.price{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: #ff0000;
	margin-top: 20rpx;
	font-size: 32rpx;
	font-weight: 900;
}

.price>image{
	width: 50rpx;
	height: 50rpx;
}
.text>text:first-child{
	font-size: 26rpx;
}
.KeyWords > text{
	font-size: 20rpx;
	display: inline-block;
	border: 1px solid #4CD964;
	color: #4CD964;
	line-height: 32rpx;
	margin-right: 10rpx;
	padding: 0 10rpx;
	border-radius: 10rpx;
}
</style>