Vue组件（一）：评分、搜索、菜单、轮播、分页等

Vue组件

在做项目的时候经常会写功能一样，只是写入的数据不一样的元素，为了避免重复书写，会将这些元素做成组件，例如菜单、分页、轮播图等。
由于目前还是用的是VScode软件，写组件的模板没有提示，需要手动书写，所以对于刚刚尝试写组件的新手，可以现在html文件中先写出组件的元素以及需要实现的功能。

评分组件

以评分作为例子：
做评分组件的几个元素：
1、总分有几颗星？
2、初始时有没有默认星？
3、怎么实现鼠标往后移动的时候星星被点亮，向前移开的时候星星不亮。鼠标离开评分，恢复默认值
4、鼠标点击的时候，实现评分，鼠标移开后分数不变

首先写出html文件，星星图案是iconfont，对星星设置颜色，星星图案分为，实心和空心的

首先通过v-for循环，设置总分，count在js中传入，为了实现鼠标离开恢复默认星数，这时候引入一个临时变量tempScore，鼠标移动时将数据赋值给这个变量，真正实现评分的变量时score。初始化时tempScore和score值一样，当移动时经过判断给予亮星。
count为数字，item为1-10数据

 <div id="app" v-cloak><i v-for='item in count' class="iconfont star " @mouseenter='tempScore=item'@mouseleave='tempScore=score'@click='score=item':class="item<=tempScore?'iconstar1':'iconstar'"></i></div>

JS文件

<script>new Vue({el: '#app',data() {return {count:10,//总分时星星的个数score:1,//实际改变亮星tempScore:1,//临时储存亮星}},})
</script>

此时一个评分功能实现成功，如果有好几个评分，此时需要对html文件中的内容复制几遍，在js中得多设置几个变量，这样子js会多出很多变量，不简洁，此时需要将评分做成组件。
首先将原先的html部分的内容写入template模板中，但是由于内部不能直接调用外部变量，需要在组件内部，设置自己的变量，对自己内部变量进行赋值，再将数据传出去。
对于需要从外部传入的数据写入props中。

 <div id="app" v-cloak><p> 客服态度:{{kefu}}分，物流速度{{wuliu}}分，快递质量{{kuaidi}}分</p><star label='客服态度' :count='10' :score='4' @change='setkefu'></star><star label='物流速度' :count='5' :score='2' color='yellow' @change='setwuliu'></star><star label='快递质量' :count='10' :score='3' color='green' @change='setkuaidi'></star></div>

<script>Vue.component('star', {props: ['label','count','score','color'],//传输参数template: ` {{label}} `,data() {return {tempScore:this.score,sj_score:this.score,}},watch: {sj_score(val){//对实现评分的变量进行监听this.$emit('change',val)//子组件通过$emit触发父组件的自定义事件，将变量传出给父组件}},}new Vue({el: '#app',data() {return {kefu:0,wuliu:0,kuaidi:0,}},methods: {//在父组件中将得到的值载赋值给每一个组件中实现评分的变量。setkefu(score){this.kefu=scoreconsole.log('客服态度:'+this.kefu);},setwuliu(score){this.wuliu=scoreconsole.log('物流速度:'+this.wuliu);},setkuaidi (score){this.kuaidi=scoreconsole.log('快递质量:'+this.kuaidi );}},})
</script>

但是对组件都需要设置事件才能获取到数据，js代码中有不少重复，此时可以用v-model来简化代码，v-model的使用是利用input标签的value和input事件来实现的。
可以对上述的代码进行简化：对进行评分的变量进行双向绑定

 <div id="app" v-cloak><p> 客服态度:{

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！