Wie man Vue-Komponenten in praktischen Projekten verwendet

Dieses Mal zeige ich Ihnen, wie Sie Vue-Komponenten in praktischen Projekten verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Vue-Komponenten in praktischen Projekten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. Rekursive Komponenten

Eine Komponente kann sich in ihrer Vorlage einfach selbst aufrufen.

Ein Beispiel lautet wie folgt:

  <p id="app19">
   <my-component19 :count="1"></my-component19>
  </p>
Vue.component('my-component19',{
 name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。
 props: {
  count: {
   type: Number,
   default: 1
  }
 },
 template: '<p><my-component19 :count="count+1" v-if="count<3"></my-component19></p>'
});
var app19 = new Vue({
 el: '#app19'
});

Das Rendering-Ergebnis ist:

 <p id="app19">
  <p>
   <p>
    <p><!----></p>
   </p>
  </p>
 </p>

Nach dem Festlegen des Namens kann er rekursiv in der Komponentenvorlage verwendet werden. Dies sollte jedoch der Fall sein Beachten Sie, dass die Anzahl der Rekursionen unter einer Bedingung begrenzt werden muss. Andernfalls wird ein Fehler ausgegeben: Die maximale Stapelgröße wurde überschritten.

Die rekursive Verwendung von Komponenten kann verwendet werden, um einige unabhängige Komponenten mit unbekannten hierarchischen Beziehungen zu entwickeln, wie z. B. kaskadierende Selektoren und Baumsteuerelemente.

2. Inline-Vorlage

Die Vorlage der Komponente wird im Allgemeinen in der Vorlagenoption definiert Wenn Sie eine Komponente verwenden, verwenden Sie das Inline-Template-Attribut für das Komponenten-Tag. Die Komponente behandelt ihren Inhalt dann als Vorlage, anstatt ihn als Inhalt zu verteilen, was die Vorlage flexibler macht.

Beispiele sind wie folgt:

<p id="app20">
   <my-component20 inline-template>
    <p>
     <h3>在父组件中定义子组件的模板</h3>
     <p>{{msg}}</p>
    </p>
   </my-component20>
  </p>
Vue.component('my-component20',{
 data: function(){
  return {
   msg: '在子组件声明的数据'
  }
 }
});
var app20 = new Vue({
 el: '#app20'
});

3. Dynamische Komponenten

Vue.js bietet ein spezielles Element ＜component> Wird zum dynamischen Mounten verschiedener Komponenten verwendet. Verwenden Sie das Attribut is, um die zu mountende Komponente auszuwählen.

Beispiele sind wie folgt:

<p id="app21">
   <component :is="currentView"></component>
   <button @click="changeView(&#39;A&#39;)">切换到A</button>
   <button @click="changeView(&#39;B&#39;)">切换到B</button>
   <button @click="changeView(&#39;C&#39;)">切换到C</button>
  </p>
var app21 = new Vue({
 el: '#app21',
 data: {
  currentView: 'comA'
 },
 methods: {
  changeView: function(data){
   this.currentView = 'com'+ data　　//动态地改变currentView的值就可以动态挂载组件了。
  }
 },
 components: {
  comA: {
   template: '<p>组件A</p>'
  },
  comB: {
   template: '<p>组件B</p>'
  },
  comC: {
   template: '<p>组件C</p>'
  }
 }
});

4. Asynchrone Komponenten

Wenn Ihr Projekt groß genug ist und Sie genug verwenden Komponenten ist es an der Zeit, über Leistungsprobleme nachzudenken, da das Laden aller Komponenten zu Beginn unnötigen Mehraufwand verursacht.

Glücklicherweise ermöglicht Ihnen Vue.js, eine Komponente als Factory-Funktion zu definieren und die Komponente dynamisch zu analysieren. Vue löst die Factory-Funktion nur aus, wenn die Komponente gerendert werden muss, und speichert die Ergebnisse für das anschließende erneute Rendern zwischen. Die Factory-Funktion von

 <p id="app22">
      <my-component22></my-component22>
    </p>
Vue.component('my-component22',function(resolve, reject){
  window.setTimeout(function(){
    resolve({
      template: '<p>我是异步渲染的</p>'
    })
  },2000)
});
var app22 = new Vue({
  el: '#app22'
});

erhält einen Auflösungsrückruf und wird aufgerufen, wenn die vom Server heruntergeladene Komponentendefinition empfangen wird. Sie können auch „reject(reason)“ aufrufen, um einen Ladefehler anzuzeigen.
Das setTimeout dient hier lediglich zur Demonstration der Asynchronität. Die spezifische Download-Logik kann beispielsweise von Ihnen selbst festgelegt werden. Schreiben Sie die Komponentenkonfiguration als Objektkonfiguration, fordern Sie sie über Ajax an und rufen Sie dann „resolve“ auf, um die Konfigurationsoptionen zu übergeben.

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 chinesischen PHP-Website!

Empfohlene Lektüre:

Was sind die Schleifendurchlaufanweisungen in Vue?

So verwenden Sie den Angular-Datenbindungsmechanismus

Das obige ist der detaillierte Inhalt vonWie man Vue-Komponenten in praktischen Projekten verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!