Detaillierte Erläuterung der Verwendung der globalen Vue-Registrierung und der lokalen Registrierung

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung der globalen Vue-Registrierung und der lokalen Registrierung geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung der globalen Vue-Registrierung und der lokalen Registrierung? ? Das Folgende ist ein praktischer Fall.

Globale Registrierung, registrierte Komponenten müssen vor der Initialisierung der Root-Instanz registriert werden

Lokale Registrierung: Durch die Registrierung mit der Komponenteninstanzoption können Sie die Komponente nur im Rahmen einer anderen Komponente oder Instanz verfügbar machen:

Globale Komponenten

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

Lokale Komponentendemo:

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

Der Umfang der Komponenteninstanzen ist isoliert. Dies bedeutet, dass Sie in der Vorlage der untergeordneten Komponente nicht direkt auf die Daten der übergeordneten Komponente verweisen 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 Daten deklarieren, die sie mithilfe der Option „props“ erhalten soll

In der Vorlage binden Sie die Daten der übergeordneten Komponente dynamisch an die Requisiten der Untervorlage, ähnlich wie bei der Bindung an jedes normale HTMLMO-Attribut. 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 stellt alle Attribute im DatenobjektAttribut

dieser Instanz dar. Die Eigenschaften und Methoden aller Vue-Instanzen zeichnen sich dadurch aus, dass sie mit $ beginnen und Vue.set

entsprechen Zum Beispiel:

vm.$data

vm.$methods

vm.$watch

Dies ist hilfreich, um es von den Daten des Datenattributobjekts

zu unterscheiden Es gibt viele Anweisungen in Form von v-xxx:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der php-chinesischen Website!

Empfohlene Lektüre:

Wie man zeilenweise liest Zeile in Lesezeile Inhalte abrufen und schreiben

Detaillierte Erklärung der Verwendung von Mutationen und Aktionen von Vuex

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der globalen Vue-Registrierung und der lokalen Registrierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!