vue custom components are divided into local components and global components

Global components

Global component format Template is a template props is an attribute used by custom components, which can be an object or an array The names of components are usually connected by - or named by hump. However, when using, it is still necessary to use - connection between case and upper case, and uppercase becomes lowercase Vue.component('MyComponentName', { /* ... */ })

               Component name               
Vue.component('my-component-name', { 
      //Template
      template: ` html label `，
      //The defined property name props can be an array or an object
      props: ["title","value"]
      props:{
               title: {
                     type: String,     //type
                     required: false   //Can be empty
                },
                value: {
                      type: Number,
                      default:0,       //The default value is 0
                      required: true   //Cannot be empty
                }
             }  
})

Local component

Each component is a small Vue instance, which has all options except el option.

The rules for creating local components in components: {} in vue instance are the same as those in global creation, Local creation can only be used in the current instance When using a component, add the following before the attribute of the component line class:

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>

Define a component whose component is z-counter in components label is the title. readonly is read-only and cannot be written In the component, the attribute props of the defined component cannot be modified by default. At this time, I define a transit variable in data

In the vue instance, data can be an object or a method, However, in a component, data can only be a data method, which returns an object If the data component is used in multiple copies, it may cause the same component to use multiple copies of data.

new Vue({
            el: '#app',
            data: {
                list:[
                    {
                        label:"clothes",
                        count:5
                    },
                    {
                        label:"trousers",
                        count:6
                    },
                    {
                        label:"Socks",
                        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 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 listen to the value of mydata. If the median value changes, use this$ Emit sends the data to the front to ensure that the data is new at the same time The first parameter is the user-defined method name, and the first parameter is the value passed back this.$emit() customizes a synccount method, and the method name is optional, Write a method in the format of @ synccount = "" in the component z-counter to receive data. If you need to receive multiple parameters, and the default parameters, you need to add $event after the parameters of the method Full format ↑ @synccount="synccount(index,$event)"