一、什么是组件

组件就是零件，将零件组装成想要的工具（页面），组件是vue.js最强大的功能之一，它可以扩展html元素，封装可重用的代码，通过传入对象的不同，实现组件的复用。

1.定义全局组件
全局组件：使用Vue.component来创建全局组件，可以用在创建的 Vue 根实例 (new Vue) 的模板中，任何方式，任何地点都可以使用的标签组件。

Vue.component('mx-box', {
       template:`
       <div>
           <h1>标题</h1>
       </div>
       `,
       props:{ },
       data() {
           return { }
       }           
})
new Vue({ el: '#app' })

<div id="app">
     <mx-box> </mx-box>
</div>

2.定义局部组件

只能在定义它的el中使用，不能在其他位置，否则就会失效。

new Vue({
  el: '#app',
  components: {
       // 自定义组件名
       'mx-box': {
         template:`
         <div>
             <p> hello </p>
         </div>
         `,
         props:{ },
         data() {
             return { }
         }       
       }
  }
})

<div id="app">
     <mx-box> </mx-box>
</div>

(1)components选项中定义局部组件。每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。
(2)组件名称：自定义，可以使用驼峰命名方式或者短横线的命名方式，但是需要注意的是如果应用到DOM中，就只能用短横线命名的方式，否则就会报错。注意组件的名称不要跟原生html元素重名。
(3)template选项：定义组件的模板。模板中必须包含一个根标签。
(4)props选项：定义组件标签上的属性。驼峰命名法的 prop 名（postTitle）需要使用其等价的短横线分隔命名法（post-title）命名。注意：props是只读的，不能修改（解决办法：在data中对props接收到的数据进行中转）。
(5)props的值可以是一个字符串数组，里面定义每一个标签属性名称，这是简单用法，不能对属性做严格的验证。例如：props:["count"]。
(6)props的值可以是一个对象，里面定义每个标签属性名称，以及对应的类型。例如：props:{ count:Number }。
(7)props的值可以是一个对象，里面定义的每个标签属性名称也可以是一个对象，在这个对象里面定义该属性的完整信息。type 定义类型，required 非空，default 默认值。例如：props: {count: { type: Number, required: true, default: 1 } }
(8)data：定义组件的数据。注意：Vue实例的data选项可以是一个对象，也可以是一个方法，由该方法返回一个对象。 但是在组件中，data选项必须是一个方法，由该方法返回一个对象。因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。

二、全局组件和局部组件的区别

全局：可以再页面中任何位置使用。
局部：只能在定义它的el中使用，不能在其他位置，否则就会失效。
定义方法
全局：可以使用Vue.component（tagName，options）定义。
局部：可以通过Vue实例中component属性定义局部组件。
是否挂载：全局组件在扩展元素用于封装复用代码时不需要挂载，但是不常见，因为会影响浏览器的性能 局部组件必须手动挂载，否则会失效。
其他 局部组件中代码的编写是”components“,而全局组件中是”component“ 。

三、$emit()自定义事件

Vue为每个组件对象提供了一个内置方法：$emit，作用：子组件向父组件传值，触发自定义事件，注意：事件名称中不能采用大写字母。

// 触发一个自定义事件，事件名称是synccount，将val作为事件对象传出去
this.$emit('synccount',val)

<mx-box @synccount="synccount(doSomething)"> </mx-box>

四、练习，counter组件

    <div id="app">
        <ul class="list">
            <li v-for="(item,index) in list" :key="index">{{item.label}}--{{item.count}}</li>
        </ul>
        <b-counter v-for="(item,index) in list" :key="index" :label="item.label" :count="item.count"
            @synccount="synccount(index,$event)"></b-counter>
    </div>

        new Vue({
            el: '#app',
            // 定义数据
            data: {
                list: [
                    {  label: '衣服',count: 5  },
                    {  label: '裤子',count: 8  },
                    {  label: '鞋子',count: 3  },
                    {  label: '袜子',count: 10  }
                ]
            },
            methods: {
                synccount(index, e) {
                    // 同步更新商品的数量
                    this.list[index].count = e
                }
            },
            // 注册组件
            components: {
                'b-counter': {
                    template: `
                    <div class="counter">
                        <div class="label">{{label}}</div>
                        <div class="btns">
                            <button @click="myCount--" :disabled="myCount===minCount">-</button>
                            <input readonly class="text" type="text" :value="myCount">
                            <button @click="myCount++" :disabled="myCount===maxCount">+</button>
                        </div>
                    </div>
                    `,
                    //props选项
                    props: {
                        // 文本
                        label: {
                            type: String,
                            // 允许为空
                            required: false,
                        },
                        // 数量
                        count: {
                            type: Number,
                            // 非空
                            required: true
                        },
                        // 最大值
                        maxCount: {
                            type: Number,
                            default: 999
                        },
                        // 最小值
                        minCount: {
                            type: Number,
                            default: 1
                        }
                    },
                    //定义数据
                    data() {
                        return {
                            // 将props接收到的count，中转给myCount
                            myCount: this.count
                        }
                    },
                    // 监听器
                    watch: {
                        // 侦听myCount是否发生变化
                        myCount(val) {
                            // 触发一个自定义事件synccount，将count的最新值作为事件对象传出去
                            this.$emit('synccount', val)
                        }
                    }
                }
            }
        })

效果：

五、练习，评分组件

    <div id="app">
        <ul class="list">
            <li v-for="(item,index) in list" :key="index">{{item.title}}--{{item.value}}</li>
        </ul>
        <b-star v-for="(item,index) in list" :key="index" 
        :title="item.title" :value="item.value" @syncvalue="syncvalue(index,$event)"></b-star>
    </div>

        // 注册全局组件
        Vue.component('b-star', {
            //模板
            template:`
            <div class="star">
                <div class="title">{{title}}</div>
                <div>
                    <i v-for="item in 10" :key="item" class="iconfont" 
                    :class="item<=myValue?'icon-xingxing':'icon-star'"
                    @mouseenter="enter(item)" @mouseleave="leave(item)" @click="okValue=item"></i>
                </div>
            </div>
            `,
            // 定义组件的标签属性
            props:{
                title:{
                    type:String,
                    required:false
                },
                value:{
                    type:Number,
                    default:0
                }
            },
            // 数据
            data() {
                return {
                    // 中转props传进来的value值
                    myValue:this.value,
                    // 定义一个确定值
                    okValue:this.value
                }
            },
            // 方法
            methods: {
               // 鼠标进入时，调用的方法
                enter(val){
                    this.myValue = val
                },
               // 鼠标离开时，调用的方法
                leave(val){
                    this.myValue = this.okValue
                }
            },
            // 监听器
            watch:{
                // 侦听okValue的变化
                okValue(val){
                    // 触发自定义事件
                    this.$emit('syncvalue',val)
                }
            }
        })
        new Vue({
            el:'#app',
            data:{
                list:[
                    {
                        title:'产品质量',
                        value:5
                    },
                    {
                        title:'物流速度',
                        value:7
                    },
                    {
                        title:'客服态度',
                        value:2
                    }
                ]
            },
            methods: {
                // 同步评分
                syncvalue(index,e){
                    this.list[index].value = e
                }
            },
        })

效果：