A brief introduction and example analysis of global registration and local registration in vue.js components

This article brings you a brief introduction and example analysis of global registration and local registration in vue.js components. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

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

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

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

           },
           
       })
    </script>

When we register a component, we need to give it a name such as com-btn. From the above code we You can see that the component name

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

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

It is worth noting that all components must be written in front of the root instance to take effect.

2 Instances of local ancestors

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

           },
           components:{
               &#39;com-btn&#39;:childcom,//调用这个组件
           }
       })
    </script>

The advantage of local registration is that when you use In a build system like webpack, if a component is registered using global registration, then when you don't use a certain component, it will still exist in the final build result, which adds unnecessary js download.

So we can register the component through a simple js object

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

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

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, don’t 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 this component.

Partially registered components are not available in their subcomponents. If you want componentA to be available in componentB, you need to write it like this:

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

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

Related recommendations:

Detailed explanation of vue global registration and local registration

vue component registration form

The above is the detailed content of A brief introduction and example analysis of global registration and local registration in vue.js components. For more information, please follow other related articles on the PHP Chinese website!