在项目搭建中可能某一模块频繁使用,这样为了方便组件的复用性,就可以单独建一个组件使用
本文说演示示例是一个评分打星星组件
一、首先在项目中建文件 名称为 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())