Comment implémenter l'enregistrement global et l'enregistrement local dans les composants vue

Je vais maintenant partager avec vous un article sur la mise en œuvre de l'enregistrement global et de l'enregistrement local des composants vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Enregistrement global, le composant enregistré doit être enregistré avant d'initialiser l'instance racine ;

Enregistrement local, en utilisant l'option d'instance de composant pour s'enregistrer, le composant ne peut être utilisé que dans un autre composant ou instance Disponible dans le domaine :

Composants globaux

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

Démo de composants partiels :

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

La portée des instances de composants est isolée. Cela signifie que les données du composant parent ne peuvent pas être directement référencées 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 explicitement utiliser l'option props pour déclarer les données qu'il s'attend à obtenir

Dans le modèle, les données du composant parent doivent être liées dynamiquement à le modèle enfant, similaire à la liaison à n'importe quelle propriété HTMO normale. Utilisez simplement v-bind. Chaque fois que les données du composant parent changent, la modification sera également transmise au composant enfant :

Tous les composants vuejs sont des instances de vue étendues

Chaque Vue L'instance sera proxy tous les attributs dans l'objet d'attribut de données de cette instance

Tous les attributs et méthodes de l'instance Vue elle-même se distinguent en commençant par $, correspondant à Vue.set

Pour 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 sont Existe sous la forme de v-xxx :

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Diffusion et réception des événements Vue2.0 (mode observateur)

style d'installation vue2.0/chargeur css méthode

méthode de réglage dynamique de la hauteur de la table iview

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!