How to implement global registration and local registration in vue components

Below I will share with you an article on the implementation of global registration and local registration of vue components. It has a good reference value and I hope it will be helpful to everyone.

Global registration, the registered component needs to be registered before initializing the root instance;

Local registration, by using the component instance option to register, the component can only be used in another component or instance Available in domain:

Global components

js

Vue.component('tab-title',{
   props:['title'],
   template:&#39;<li v-on:click="$emit(\&#39;change\&#39;)">{{title}}</li>&#39;
 })
 Vue.component(&#39;tab-content&#39;,{
   props:[&#39;content&#39;],
   template:&#39;<p>{{content}}</p>&#39;
 })

Local component demo:

html

<p id="app">
  <ul class="navTab">
   <li v-for="(navTab,index) in navTabs" is="tab-title" v-bind:info="navTab.text" v-bind:class="{active:navTab.isActive}" v-on:addactive="switchActive(index)"></li>
  </ul>
  <p class="tabContent">
   <p v-for="navTab in navTabs" is="tab-content" v-bind:content="navTab.tabContent" 
   v-bind:class="[&#39;tab-panel&#39;,{active:navTab.isActive}]" v-if="navTab.isActive"></p>
  </p>
  </p>

js

var app=new Vue({
      el: '#app',
     components: {
       'tab-title': {
        props:['info'],//接受父元素传递的参数
        template:&#39;<li v-on:click="$emit(\&#39;addactive\&#39;)">{{info}}</li>&#39;//点击时传递通过$emit子元素传递给父元素调用 addactive方法（不能使用驼峰写法）
        },
       &#39;tab-content&#39;:{
         props:["content"],
        template:&#39;<p>{{content}}</p>&#39;
       }
     },
     methods:{
       switchActive:function(index){
        for(var i=0;i<this.navTabs.length;i++){
         this.navTabs[i].isActive=false;
        }
        this.navTabs[index].isActive=true;
        
       }
     },
     data:{
      navTabs:[
       {
        text:"tab1",
        isActive:true,
        tabContent:&#39;this is tab1 content&#39;
       },
       {
        text:"tab2",
        isActive:false,
        tabContent:&#39;this is tab2 content&#39;
       },
       {
        text:"tab3",
        isActive:false,
        tabContent:&#39;this is tab3 content&#39;
       }
      ]
     }
    });

The scope of the component instance is isolated. This means that the data of the parent component cannot be directly referenced in the template of the child component. To make the child component use the data of the parent component, we need to pass the props option of the child component.

The child component must explicitly use the props option to declare the data it expects to obtain

In the template, the data of the parent component must be dynamically bound to the child template. props, similar to binding to any normal HTMO properties. Just use v-bind. Whenever the data of the parent component changes, the change will also be passed to the child component:

All vuejs components are extended vue instances

Every Vue The instance will proxy all the attributes in the data attribute object of this instance

All the properties and methods of the Vue instance itself are distinguished by starting with $, corresponding to Vue.set

For example:

vm.$data

##vm.$methods

vm.$watch

This is helpful to distinguish it from the data of the data attribute object

Many instructions are Exists in the form of v-xxx:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue2.0 event broadcasting and reception (observer mode)

vue2.0 installation style/css Loader method

#iview table height dynamic setting method

The above is the detailed content of How to implement global registration and local registration in vue components. For more information, please follow other related articles on the PHP Chinese website!