uni-app快速入手 ——（5）项目实战 一 自定义组件+组件传值，uni.createAnimation()在app中如果是数组渲染的话无效果解决

在项目搭建中可能某一模块频繁使用，这样为了方便组件的复用性，就可以单独建一个组件使用

本文说演示示例是一个评分打星星组件

一、首先在项目中建文件 名称为 components uni-app组件目录 和vue项目一样

在components新建组件 starComp.vue

<template name="helloComp">
	<view>
		<view class="movie-score-wapper">
			<image src="../static/icos/star-yellow.png" mode="" class="star-ico" v-for="num in starNum" :key="num"></image>
			<image src="../static/icos/star-gray.png" mode=""  class="star-ico" v-for="inum in 5-Number(starNum)" :key="inum+10"></image>
			<view class="movie-score">
				{{scoreNumber}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"helloComp",
		props:{
			starNum:{
				type:Number,
				default:0
			},
			scoreNumber:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.movie-score-wapper{
	display: flex;
	flex-direction: row;
}

.star-ico{
	width: 20rpx;
	height: 20rpx;
	margin-top: 6rpx;
}

.movie-score{
	font-size: 12px;
	color: grey;
	margin-left: 8rpx;
}
</style>

二、引用   在index.vue中引用

<template>
	<view class="page">
		
		<starComponent :starNum="starNum" :scoreNumber="item.scoreNumber"/>
			
	</view>
</template>

<script>

import starComponent from '../../components/helloComp.vue';
export default {
	components: {
		starComponent
	},
	data() {
		return {
			starNum:4,
            scoreNumber:8
		};
	},
	onLoad() {
		
	},
	methods: {}
};
</script>

<style>
@import url('index.css');
</style>

这种父子组件传值

首先在子组件中定义 props，props中的参数是从父组件中传来的

props:{
			starNum:{
				type:Number,
				default:0
			},
			scoreNumber:{
				type:Number,
				default:0
			}
		},

父组件中如何绑定

<starComponent :starNum="starNum" :scoreNumber="scoreNumber"/>

这样组件就可以传值通信了

--------------------------------------分割线-------------------------------------------------------------

在学习demo的时候发现一个问题，使用数组创建动画时在小程序中可以使用，在app和h5中没有效果，

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
相关文档：https://cn.vuejs.org/v2/guide/list.html#注意事项

所以
     this.animationDataArr[gIndex] = this.animationData.export()
改为： 
     this.animationDataArr.splice(gIndex, 1, this.animationData.export())