1. Global registration instance (according to the example on the official website, the following is the code)

 <div id="app">
     <com-btn></com-btn>
     <com-btn></com-btn>
 </div>

<script>
        Vue.component('com-btn',{
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click='change'>Point me{{num}}second</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        })
       var vm = new Vue({
           el:'#app',
           data:{

           },
           
       })
    </script>

When we register a component, we need to give it a name, such as com BTN. We can see from the above code

Vue.component('my-component-name', { /* ... */ })

This component name is the first parameter of the com BTN component we registered. This component is registered globally. After they register, we can use it in any newly created vue root instance (new Vue).

It is worth noting that all components must be written before the root instance to take effect,

2 example of partial genealogy

<script>
        var childcom ={
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click='change'>Point me{{num}}second</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        }
       var vm = new Vue({
           el:'#app',
           data:{

           },
           components:{
               'com-btn':childcom,//Call this component
           }
           
       })
    </script>

The advantage of local registration is that when you use a build system such as webpack, if you use a component registered in this way of global registration, then when you do not use a component, it will still exist in the final build results, which adds unnecessary js downloads.

So we can register components through a simple js object

var ComponentA = { /* ... */ }

When you need to use this component, you only need to call the defined component in your root instance.

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

It is worth noting that the attribute name of the root instance is components. Do not forget s. The other properties in the component are the same as those of the instance, but data must be a function.

For each attribute in the components object, it is the name of the custom component, and the attribute value is the option object of the component.

Locally registered components are not available in their subcomponents. If you want component A to be available in component B, you need to write as follows:

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}