Explication détaillée de l'utilisation de l'enregistrement global et de l'enregistrement local de vue

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de l'enregistrement global et de l'enregistrement local. Quelles sont les précautions lors de l'utilisation de l'enregistrement global et de l'enregistrement local. ? Ce qui suit est un cas pratique.

Inscription globale, les composants enregistrés doivent être enregistrés avant d'initialiser l'instance racine

Enregistrement local, en vous inscrivant avec l'option d'instance de composant, vous pouvez rendre le composant disponible uniquement dans la portée d'un autre composant ou instance :

Composants globaux

js

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>'
 })

Démo du composant local :

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:'<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'
       }
      ]
     }
    });

La portée des instances de composants est isolée. Cela signifie que vous ne pouvez pas directement référencer les données du composant parent dans le modèle du composant enfant. Pour que le composant enfant utilise les données du composant parent, nous devons passer l'option props du composant enfant.

Le composant enfant doit déclarer explicitement les données qu'il espère obtenir en utilisant l'option props

Dans le modèle, vous liez dynamiquement les données du composant parent aux accessoires du sous-modèle, de la même manière que vous liez à n'importe quel attribut HTMLMO normal. Utilisez simplement v-bind. Chaque fois que les données du composant parent changent, la modification est également transmise au composant enfant :

Tous les composants vuejs sont des instances de vue étendues

Chaque instance de Vue proxy tous les attributs dans l'attribut data

objet

de cette instance. Toutes les propriétés et méthodes de toutes les instances Vue se distinguent en commençant par $, correspondant à Vue.set

Par exemple :

vm.$data

vm.$methods

vm.$watch

Ceci est utile pour le distinguer des données de l'objet d'attribut de données

De nombreuses instructions existent sous la forme de v-xxx :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

Lecture recommandée :

Comment lire une ligne par line in readline Obtenir et écrire du contenu

Explication détaillée de l'utilisation des mutations et des actions de Vuex

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!