Detaillierte Erklärung der Beziehung zwischen Vue und VueComponent

Der folgende Fall überprüft die Wissenspunkte der Prototypkette, die wir zuvor gelernt haben

       // Definiere eine Konstruktorfunktion Demo() {
            dies.a = 1
            dies.b = 2
        }
        //Erstellen Sie ein Demo-Instanzobjekt const d = new Demo()
        console.log(Demo.prototype); //Prototypeigenschaften anzeigen console.log(d.__proto__); //Implizite Prototypeigenschaften console.log(Demo.prototype === d.__proto__); //true
        //Der Programmierer bedient das Prototypobjekt, indem er die Prototypattribute anzeigt und ein x-Attribut mit einem Wert von 99 anhängt
        Demo.prototype.x = 99
        console.log('@',d.__proto__.x); 

Analysieren Sie VueComponent anhand der folgenden Komponenten

<Text>
    <div id="Wurzel">
         <Schule></Schule>
    </div>
    <Skript>
        Vue.config.productionTip = falsch
        //Definieren Sie die Schulkomponente const school = Vue.extend({
            Name: 'Schule',
            Vorlage: `
              <div>
                <h2>Name der Schule: {{name}}</h2>
                <h2>Schuladresse: {{address}}</h2>
              </div>
            `,
            Daten() {
                zurückkehren {
                    Name: 'Shang Silicon Valley',
                    Adresse: 'Peking'
                }
            }   
        })
        //Vue erstellen
        neuer Vue({
            el:'#Wurzel',
            Komponenten: {
                Schule,
            }
        })
    </Skript>
</body> 

1. Die Schulkomponente ist im Wesentlichen ein Konstruktor namens VueComponent und wird nicht vom Programmierer definiert, sondern von Vue.extend generiert

2. Wir müssen nur <school/> oder <school</school> schreiben, und Vue hilft uns beim Parsen, ein Instanzobjekt der Schulkomponente zu erstellen. Das heißt, Vue hilft uns bei der Ausführung: new VueComponent(options)

3. Besonderer Hinweis: Bei jedem Aufruf Vue.extend wird eine neue VueComponent zurückgegeben

4. Zu diesem Hinweis:

• In der Komponentenkonfiguration: data , Funktionen in methods , Funktionen in watch , Funktionen in computed , dies sind alles VueComponent -Instanzobjekte
• In new Vue(options) -Konfiguration: data , Funktionen in methods , Funktionen in watch , Funktionen in computed , ihre dies sind alles Vue-Instanzobjekte

5. VueComponent-Instanzobjekt, im Folgenden als vc ---- Komponenteninstanzobjekt bezeichnet

Wichtige Punkte

• Eine wichtige integrierte Beziehung: VueComponent.prototype._proto_===Vue.prototype
• Warum ist diese Beziehung erforderlich: um dem Komponenteninstanzobjekt vc den Zugriff auf die Eigenschaften und Methoden des Vue-Prototyps zu ermöglichen

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!