Interpretation der Vue-Komponentenregistrierungsmethode

Überblick

Das Konzept der Komponentenbildung verleiht der Frontend-Seitenentwicklung eine klarere Struktur.

Eine Komponente in Vue ist ein Instanzobjekt von Vue. Daher sind die Konstruktionsoptionen der Vue-Komponente dieselben wie die Konstruktionsoptionen der neuen Vue()-Methode zum Erstellen einer Vue-Instanz, und die zulässigen Konstruktionsoptionen sind dieselben. Mit Ausnahme von root-instanzspezifischen Optionen wie el. Vue-Komponenten müssen jedoch wiederverwendbar sein, daher muss die Datenoption in der Konstruktionsoption eine Funktion sein, die ein Objekt zurückgibt.

Warum kann die Datenoption eine Funktion sein, die ein Objekt zurückgibt, um die Wiederverwendbarkeit der Komponente sicherzustellen?

Denn unabhängig davon, ob Sie eine Vue-Instanz mit der neuen Vue()-Methode oder durch Definieren einer Vue-Komponente erstellen, besteht die ausgeführte Operation darin, die Eigenschaftswerte in den Konstruktionsoptionen direkt dem neu erstellten Vue-Instanzobjekt zuzuweisen. Die Wiederverwendung von Komponenten bedeutet, dass Vue dieselben Konstruktionsoptionen verwendet, um mehrere Vue-Instanzobjekte mit demselben Namen, aber unterschiedlichen Adressen zu konstruieren. Wenn die Datenoption in den Konstruktionsoptionen beim Definieren einer Vue-Komponente ein Objekt ist, teilen sich bei der Wiederverwendung der Komponente mehrere Komponenten ein Datenobjekt, da die Adresse des Datenobjekts direkt der Vue-Instanz der Komponente zugewiesen ist. Wenn die Datenoption beim Definieren der Komponente jedoch eine Funktion ist, führt Vue die Funktion aus und erhält beim Erstellen der Komponente gemäß den Konstruktionsoptionen ein Objekt. Auf diese Weise wird das Datenobjekt bei jeder Erstellung einer Vue-Instanz neu generiert. Daher haben mehrere Komponenten ihre eigenen Datenobjekte und beeinflussen sich nicht gegenseitig.

Tatsächlich werden beim Registrieren einer Komponente die Konstruktionsoptionen der Komponente definiert und bei Verwendung der Komponente wird tatsächlich die entsprechende Vue-Komponenteninstanz erstellt.

1. Globale Registrierung

Global registrierte Komponenten können in der Vue-Stamminstanz und allen untergeordneten Komponenten verwendet werden. Der Registrierungseintrag ist die Funktion Vue.component(). Registrieren Sie sich einmal und verwenden Sie sie jederzeit. Die Registrierungsmethode ist wie folgt:

Vue.component('mein-Komponentenname', { 
    Optionen 
})

Hier ist ein Beispiel:

//main.js
// Dieses Beispiel ist ein in vue-cli erstelltes Projekt. Standardmäßig ist es eine unvollständige Version von vue, und die Vorlagenoption kann nicht verwendet werden. Daher wird die Renderfunktion zum Schreiben von Komponenteninhalten verwendet.
Vue.component('alle-tests',{
  Daten(){
    zurückkehren {
      x: „Ich bin eine globale Komponente“
    }
  },
  rendern(h){
    gibt h zurück('div',dies.x)
  }
})

//Global registrierte Komponenten können direkt verwendet werden //App.vue
<Vorlage>
  <div id="app">
    <alle-test />
  </div>
</Vorlage>

2. Lokale Registrierung

Die lokale Registrierung definiert die Komponente über ein einfaches JavaScript-Objekt. Anschließend wird die Komponente benannt und in der Komponentenoption in der Vue-Instanzkonstruktionsoption registriert.

let Komponente = { Optionen }

//new Vue erstellt das Stammelement Vue-Instanz new Vue({
    el: '#app'
    Komponenten:
        „mein-Komponentenname“: Komponente
    }
})

//Oder registrieren Sie die von der Vue-Komponente erstellte Vue-Instanz export default {
    Komponenten:
        „mein-Komponentenname“: Komponente
    }
}

Hier ist ein Beispiel:

//App.vue
<Vorlage>
  <div id="app">
    <alle-test />
    <Komponente-a />
    <Komponente-b />
  </div>
</Vorlage>

<Skript>
let KomponenteA = {
  Daten(){
    zurückkehren {
      x: 'Ich bin eine lokale Komponente A'
    }
  },
  rendern(h){
    gibt h zurück('div',dies.x)
  }
}

Standard exportieren {
  Name: "App",
  Komponenten:
    'Komponente-a': KomponenteA,
    'Komponente-b': {
        Daten(){
          zurückkehren {
            x: 'Ich bin eine lokale Komponente B'
          }
        },
        rendern(h){
          gibt h zurück('div',dies.x)
        }
    } 
  }
}
</Skript>

3. Lokale Registrierung im Modulsystem

In Modulsystemen wie Babel und Webpack können Sie Import und Export verwenden, um Komponentenkonstruktionsoptionsobjekte oder *.vue-Dateien zu importieren, die den Konstruktionsoptionen entsprechen.

//c.js
Standard exportieren {
    Daten(){
        zurückkehren {
          x: „Ich bin ein Komponentenkonstruktionsoptionsobjekt, das separat von der c.js-Datei exportiert wird.“
        }
      },
      rendern(h){
        gibt h zurück('div',dies.x)
      }
}

//D.vue
<Vorlage>
    <div>
        {{X}}
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Daten(){
        zurückkehren {
            x: „Ich bin die von der D.vue-Datei exportierte Komponente“
        }
    }
}
</Skript>

//App.vue
<Vorlage>
  <div id="app">
    <C />
    <D />
  </div>
</Vorlage>

importiere C aus './c.js'
importiere D aus './components/D.vue'

Standard exportieren {
  Name: "App",
  Komponenten:
    C,
    D 
  }
}
</Skript>

Oben finden Sie eine detaillierte Erklärung der Vue-Komponentenregistrierungsmethode. Weitere Informationen zur Vue-Komponentenregistrierungsmethode finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!