Einführung in lokale Komponenten in Vue

In Vue können wir lokale Komponenten selbst definieren (registrieren)

So definieren Sie einen Komponentennamen:

var KomponenteA = { /* ... */ }

var KomponenteB = { /* ... */ }

Definieren Sie dann in der Komponentenoption die Komponenten, die Sie verwenden möchten:

neuer Vue({
  el: '#app',
 
// Komponentenzentrum Komponenten: {
 // Beim Rendern einer lokal registrierten Komponente auf der Ansichtsebene // component-a: der Name, den Sie beim Aufruf auf der Ansichtsebene verwenden möchten // ComponentA: Lokal registrierter Komponentenname „component-a“: ComponentA,
    'Komponente-b': KomponenteB
  }
})

Rufen Sie die lokale Komponente in der Ansichtsebene auf:

<div id="app">
        <Komponente-a></Komponente-a>
        <Komponente-b></Komponente-b>
    </div>

Zum Beispiel:

<Text>
    
    <div id="app">
        <Komponente-a></Komponente-a>
        <Komponente-b></Komponente-b>
    </div>
 
    <script src="./js/vue.js"></script>
    <Skript>
        let KomponenteA = {
            Vorlage:`
                <p>Ich bin eine lokale Komponente 1</p>
            `
        }
 
        let KomponenteB = {
            Vorlage:`
                <p>Ich bin eine lokale Komponente 2</p>
            `
        }
 
        lass vm = neues Vue({
            el:'#app',
            Daten:{
 
            },
            Komponenten: {
                "Komponente-a":KomponenteA,
                "Komponente-b":KomponenteB
            }
        })
    </Skript>

Die Ausgabe ist:

Das könnte Sie auch interessieren:

Lokale Vue-Komponentendatenfreigabe Vue.observable()-Nutzung
Beschreibung des Unterschieds zwischen globalen und lokalen Vue-Komponenten
VUE-Registrierung, globale Komponenten und lokale Komponenten, Prozessanalyse
Vue-Komponentendefinition, globale und lokale Komponenten, Beispiele für Vorlagen und dynamische Komponentenfunktionen
Detaillierte Analyse des Unterschieds zwischen globalen und lokalen Vue-Komponenten
Detaillierte Erklärung zur Verwendung globaler und lokaler Vue-Komponenten
Detaillierte Erläuterung der Verwendung globaler Komponenten und lokaler Komponenten in Vue-Komponenten
Detaillierte Erläuterung der globalen und lokalen Komponenten von vue.js

<<: Die perfekte Lösung für das AutoFill-Problem in Google Chrome

>>: Textarea-Tag in HTML