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

Vue组件

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

评分组件

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

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

 <link rel="stylesheet" href="https://at.alicdn.com/t/font_1743185_37l8tzue6bb.css">
<style>
    [v-cloak] {
   
        display: none;
    }
    .star{
   
        font-size: 30px;
        color: red;
    }
</style>

首先通过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: `
        <div>
            <span> {
    {label}}</span> <i v-for='item in count' :style="{color:color}" 
            class="iconfont star " 
            @click='sj_score=item'
            @mouseenter='tempScore=item'
            @mouseleave='tempScore=sj_score'
            :class="item<=tempScore?'iconstar1':'iconstar'"></i>
        </div>`,
        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=score
                console.log('客服态度:'+this.kefu);
            },
            setwuliu(score){
   
                this.wuliu=score
                console.log('物流速度:'+this.wuliu);
            },
            setkuaidi (score){
   
                this.kuaidi=score
                console.log('快递质量:'+this.kuaidi );
            }
        },
    })
</script>

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

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