Detailed explanation of the use of vue global registration and local registration-JS Tutorial-php.cn

Detailed explanation of the use of vue global registration and local registration

php中世界最好的语言

Release： 2018-04-12 15:34:13

Original

2070 people have browsed it

This time I will bring you a detailed explanation of the use of vue global registration and local registration. What are the precautions for using vue global registration and local registration? The following is a practical case. Let’s take a look.

Global registration, registered components need to be registered before initializing the root instance;

Local registration, by registering with the component instance option, you can make the component available only in the scope of another component or instance:

Global components

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

Copy after login

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>

Copy after login

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

Copy after login

The scope of component instances 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 subcomponent must explicitly use the props option to declare the data it expects to obtain

In the template, you dynamically bind the parent component's data to the subtemplate's props, similar to binding to any normal HTMLMO attribute. 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

Each Vue instance will proxy all the attributes in the data

attributeobject 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 exist in the form of v-xxx:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!