So implementieren Sie die globale Registrierung und die lokale Registrierung in Vue-Komponenten

Jetzt werde ich einen Artikel über die Implementierung der globalen Registrierung und der lokalen Registrierung von Vue-Komponenten mit Ihnen teilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Globale Registrierung, die registrierte Komponente muss vor der Initialisierung der Root-Instanz registriert werden.

Lokale Registrierung. Mithilfe der Komponenteninstanzoption kann die Komponente nur in einer anderen Komponente verwendet werden Instanz Verfügbar in der Domäne:

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

Demo der lokalen Komponente:

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

Der Umfang der Komponente Instanz ist isoliert. Dies bedeutet, dass die Daten der übergeordneten Komponente nicht direkt in der Vorlage der untergeordneten Komponente referenziert werden können. Damit die untergeordnete Komponente die Daten der übergeordneten Komponente verwendet, müssen wir die props-Option der untergeordneten Komponente übergeben.

Die untergeordnete Komponente muss explizit die Option props verwenden, um die Daten zu deklarieren, die sie erhalten soll.

In der Vorlage müssen die Daten der übergeordneten Komponente dynamisch angebunden werden die untergeordnete Vorlage, ähnlich der Bindung an alle normalen HTMO-Eigenschaften. Verwenden Sie einfach V-Bind. Immer wenn sich die Daten der übergeordneten Komponente ändern, wird die Änderung auch an die untergeordnete Komponente weitergegeben:

Alle VueJS-Komponenten sind erweiterte Vue-Instanzen

Jede Vue-Instanz wird Proxy für alle Attribute im Datenattributobjekt dieser Instanz

Alle Attribute und Methoden der Vue-Instanz selbst zeichnen sich dadurch aus, dass sie mit $ beginnen und Vue.set entsprechen

Für Beispiel:

vm.$data

vm.$methods

vm.$watch

Dies ist hilfreich, um es von den Daten des Datenattributobjekts zu unterscheiden

Viele Anweisungen sind Existiert in der Form v-xxx:

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Senden und Empfangen von Vue2.0-Ereignissen (Beobachtermodus)

vue2.0-Installationsstil/CSS-Loader Methode

Methode zur dynamischen Einstellung der iview-Tabellenhöhe

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die globale Registrierung und die lokale Registrierung in Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!