Vue custom components (I) global and local components

Vue custom components are divided into local components and global components

Global components

Global component format
templateIs a template
propsAttributes used by custom components can be objects or arrays
The names of components are usually connected by – and can also be named by a hump like this. However, when using it, it is still necessary to use – to connect between case and upper case, and change uppercase to lowercase
Vue.component('MyComponentName', { /* ... */ })

Component name               
Vue.component('my-component-name', { 
      //Template
      Template:` HTML tag ',
      //The defined property name props can be an array or an object
      props：["title","value"]
      props:{
               title: {
                     Type: string, // type
                     Required: false // can be null
                },
                value: {
                      type: Number,
                      Default:0, // the default value is 0
                      Required: true // cannot be empty
                }
             }  
})

Local components

Each component is a small Vue instance. Except for the El option, it has all other options.

---

Local components in Vue instancescomponents：{}The rules for creation in are the same as those for global creation,
Local creation can only be used in the current instance
When using components, add：

---

Create a local component

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

staycomponentsDefine a component asz-counterComponents of
labelIs the titlereadonlyIs read-only and cannot be written
In a component, define the properties of the componentpropsIt cannot be modified by default. At this time, IdataDefine a transit variable in

---

In the Vue instancedataIt can be an object or a method,
But in the component,dataCan only be one method data, which returns an object
Because components may be used many times, ifdataIf the option is an object, multiple components will use the same data.

new Vue({
            el: '#app',
            data: {
                list:[
                    {
                        Label: "clothes",
                        count:5
                    },
                    {
                        Label: "pants",
                        count:6
                    },
                    {
                        Label: "socks",
                        count:10
                    },
                ]
            },
            methods:{
                synccount(index,e){
                    this.list[index].count=e
                },
            },
            components: {
                "z-counter": {
                    template:
                        `
                        <div>
                            <div >{{label}}</div>
                            <div>
                                <button @click="mydata--" :disabled="mydata===mincount">-</button>
                                <input type="text" v-model="mydata" readonly>
                                <button @click="mydata++" :disabled="mydata===maxcount">+</button>
                            </div>
                        </div>
                        `,
                    //Props is read-only and cannot be modified
                    //Prop can also be an array [attribute name]
                    props: {
                        label: {
                            type: String,
                            //Null allowed
                            required: false,
                        },
                        count: {
                            type: Number,
                            //Cannot be empty
                            required: true
                        },
                        maxcount:{
                            type:Number,
                            default:999
                        },
                        mincount:{
                            type:Number,
                            default:1
                        }
                    },
                    data() {
                        return {
                            mydata: this.count
                        }
                    },
                    watch:{
                        mydata(val){
                            this.$emit('synccount',val)
                        }
                    }
                }
            },
        })

Create a listener in the component to listenmydataIf the median value changes, usethis.$emitSend the data to the front to ensure that the data is updated at the same time
The first parameter is the user-defined method name, and the first parameter is the returned value
this.$emit（）Customize onesynccountMethod. The method name is optional,
In componentz-counterMedium use@synccount=""Write a method to receive data in the format of. If multiple parameters need to be received, and the default parameters need to be added at the end of the method parameters$event
Full format↑
@synccount="synccount(index,$event)"