vue 自定义组件（一）全局、局部组件

vue自定义组件分为局部组件和全局组件

全局组件

全局组件格式
template 是模板
props 是自定义组件用到的属性 可以是对象也可以是数组
组件的名称通常用 - 来连接，也可以像这个用大驼峰命名，但是在使用的时候，还是要使用 - 大小写之间用 - 连接，大写变成小写
Vue.component('MyComponentName', { /* ... */ })

               组件名称               
Vue.component('my-component-name', { 
      //模板
      template：` html 标签 `，
      //定义的属性名称  props可以是数组 也可以是对象
      props：["title","value"]
      props:{
               title: {
                     type: String,     //类型
                     required: false   //可以为空
                },
                value: {
                      type: Number,
                      default:0,       //默认值为0
                      required: true   //不能为空
                }
             }  
})

局部组件

每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。

局部组件在vue 实例中 components：{} 中创建 创造的规则跟全局创建时一样的，
局部创建只能在当前实例使用
在使用组件时，在组件行类 的属性前面要加上：

创建一个局部组件

 <z-counter :label="item.label" :count="item.count" v-for="(item, index) in list"  :key="index" @synccount="synccount(index,$event)"></z-counter>

在 components 中定义一个组件为z-counter 的组件
label 是标题 readonly 是只读，不能写入
在组件中，定义的组件的属性props默认情况下是不能够修改的，这个时候，我在data 中定义一个中转变量

在vue实例中 data 可以是对象，也可以是一个方法，
但是在组件中，data只能是一个方法data，由该方法返回一个对象
因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。

new Vue({
            el: '#app',
            data: {
                list:[
                    {
                        label:"衣服",
                        count:5
                    },
                    {
                        label:"裤子",
                        count:6
                    },
                    {
                        label:"袜子",
                        count:10
                    },
                ]
            },
            methods:{
                synccount(index,e){
                    this.list[index].count=e
                },
            },
            components: {
                "z-counter": {
                    template:
                        `
                        <div class="counter">
                            <div  class="label">{{label}}</div>
                            <div class="btns">
                                <button @click="mydata--" :disabled="mydata===mincount">-</button>
                                <input type="text" v-model="mydata" class="text" readonly>
                                <button @click="mydata++" :disabled="mydata===maxcount">+</button>
                            </div>
                        </div>
                        `,
                    // props 是只读的不能修改
                    //prop 也可以是数组[属性名]
                    props: {
                        label: {
                            type: String,
                            //允许为空
                            required: false,
                        },
                        count: {
                            type: Number,
                            //不可为空
                            required: true
                        },
                        maxcount:{
                            type:Number,
                            default:999
                        },
                        mincount:{
                            type:Number,
                            default:1
                        }
                    },
                    data() {
                        return {
                            mydata: this.count
                        }
                    },
                    watch:{
                        mydata(val){
                            this.$emit('synccount',val)
                        }
                    }
                }
            },
        })

在组件中创建一个监听器，监听mydata的值，如果中值发生变化，用this.$emit把数据发送给前面，保证数据是同时跟新的
第一个参数是自定义方法名，第一个参数是传回去的值
this.$emit（）自定义一个synccount 方法，方法名随意，
在组件z-counter中 用@synccount=""的格式写个方法来接收数据，如果需要接收多个参数，和默认参数 需要在方法的参数最后面加入$event
完整格式 ↑
@synccount="synccount(index,$event)"