Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in den Namen der Vue-Komponente

不言
Freigeben: 2018-07-04 10:32:15
Original
3343 Leute haben es durchsucht

Wenn Sie ein Vue-Projekt schreiben, werden Sie auf verschiedene Namen für Komponenten stoßen. Als Nächstes werde ich Ihnen in diesem Artikel eine Zusammenfassung der Rolle von Vue-Komponentennamen geben

Wir sind hier. Wenn Sie ein Vue-Projekt schreiben, werden Sie auf die Benennung der Komponente stoßen.

Der Name hier ist nicht erforderlich. Er scheint nutzlos zu sein, aber tatsächlich gibt es hier eine ganze Reihe von Verwendungsmöglichkeiten

 export default {
   name:'xxx'
}
Nach dem Login kopieren

1 Wenn das Projekt Keep-Alive verwendet, kann es mit dem Komponentennamen für die Cache-Filterung verwendet werden

Zum Beispiel:

Wir haben eine Komponente mit dem Namen detail. Nachdem der Dom geladen wurde, laden wir die Daten in die Hook-Funktion mount

export default {
  name:'Detail'
},
mounted(){
  this.getInfo();
},
methods:{
  getInfo(){
     axios.get('/xx/detail.json',{
       params:{
        id:this.$route.params.id 
       }
     }).then(this.getInfoSucc)
   }
 }
Nach dem Login kopieren

Da wir Keep-in App.vue Alive verwenden, wird die Seite nicht erneut angefordert, wenn wir sie zum zweiten Mal aufrufen, d. h. die gemountete Funktion wird ausgelöst.

Es gibt zwei Lösungen. Eine besteht darin, die Funktion „activated()“ hinzuzufügen und die Daten jedes Mal abzurufen, wenn Sie eine neue Seite aufrufen.

Eine andere Lösung besteht darin, einen Filter in Keep-Alive hinzuzufügen, wie unten gezeigt:

 <p id="app"> 
  <keep-alive exclude="Detail">
   <router-view/>
  </keep-alive>
 </p>
Nach dem Login kopieren

2.DOM Beim Rekursivmachen Komponenten

Zum Beispiel gibt es eine list.vue-Unterkomponente in der detail.vue-Komponente. Bei rekursiver Iteration müssen Sie ihren eigenen Namen nennen

list.vue:


 <p>
    <p v-for="(item,index) of list" :key="index">
      <p>
        <span class="item-title-icon"></span>
        {{item.title}}
      </p>
      <p v-if="item.children" >
        <detail-list :list="item.children"></detail-list>
      </p>
    </p>
 </p>
<script>
export default {
  name:&#39;DetailList&#39;,//递归组件是指组件自身调用自身
  props:{
    list:Array
  }
}
</script>
Nach dem Login kopieren

Listendaten:

const list = [{
     "title": "A",
     "children": [{
      "title": "A-A",
      "children": [{
       "title": "A-A-A"
      }]
     },{
        "title": "A-B"
     }]
    }, {
     "title": "B"
    }, {
     "title": "C"
    }, {
     "title": "D"
    }]
Nach dem Login kopieren

Das Ergebnis der Iteration ist wie folgt:

3. Wenn Sie vue-tools verwenden

Der im Debugging-Tool vue-devtools angezeigte Gruppenname wird durch bestimmt Komponentenname in Vue

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist Chinesische Website!

Verwandte Empfehlungen:

Einführung in die Mehrfachauswahlmenüfunktion mit unendlichen Ebenen, die von einer einzigen Vue-Komponente implementiert wird

Verwenden Sie Vue, um Tastaturkomponentenmethoden für Zahlen anzupassen

Das obige ist der detaillierte Inhalt vonEinführung in den Namen der Vue-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!