Verwendung und Demonstration von ref in Vue

Ref-Definition: Wird verwendet, um Referenzinformationen für ein Element oder eine Unterkomponente zu registrieren. Die Referenzinformationen werden im $refs-Objekt der übergeordneten Komponente registriert.

• Bei Verwendung auf einem normalen dom Element zeigt die Referenz auf dom Element.
• Bei Verwendung auf einer untergeordneten Komponente verweist die Referenz auf die Komponenteninstanz.

Beispiel:

Komponente 1:

<Vorlage>

  <div>

      Ich bin{

{Name}}

  </div>

</Vorlage>

<Skript>

Standard exportieren {  

    Name:'Cpn1',

    Daten() {

        zurückkehren {

            Name: 'Komponente 1'

        }

    },

}

</Skript>

Komponente 2:

<Vorlage>

  <div>Ich bin {

{name}}</div>

</Vorlage>

<Skript>

Standard exportieren { 

    Name:'Cpn2',

    Daten() {

        zurückkehren { 

            Name: 'Komponente 2'

        }

    },

}

</Skript>

App.vue

<Vorlage>

  <div id="app">

    <cpn-1 ref="c1"></cpn-1>

    <cpn-2 ref="c2"></cpn-2>

    <button @click="showDom">Schaltfläche</button>

    <h2 ref="title">Ich bin der Titel</h2>

    <Eingabetyp="Text" ref="Eingabe" Wert="123">

  </div>

</Vorlage>

<Skript>

importiere Cpn1 aus "./components/Cpn1.vue";

importiere Cpn2 aus "./components/Cpn2.vue";

Standard exportieren { 

  Komponenten:

    Cpn1, Cpn2 },

  Name: "App",

  Methoden: { 

    zeigeDom() { 

      Konsole.log(diese.$refs.c1);

      Konsole.log(dies.$refs.c2.$data.name);

      Konsole.log(dies.$refs.title)

      Konsole.log(dies.$refs.input.value)

      // Holen Sie sich ein echtes DOM-Objekt und ändern Sie den Wert var title = this.$refs.title;

      Titel.innerText="HalloWord"

    },

  },

};

</Skript>

Führen Sie das obige Programm aus und klicken Sie auf der Seite auf die Schaltfläche "Button". Der Effekt ist wie folgt:

Schauen Sie sich auch die Konsole an:

Sie können sehen, dass bei Verwendung des Ref-Objekts auf einem normalen Element ein normales DOM-Element erhalten wird. Bei Verwendung von Ref auf einer untergeordneten Komponente verweist der Verweis auf die Komponenteninstanz.

Je nach tatsächlichem Bedarf können wir Referenzinformationen für Elemente oder Unterkomponenten über ref registrieren. Bei Bedarf können wir $refs verwenden, um das echte DOM-Element oder die Komponenteninstanz abzurufen und die gewünschten Vorgänge auszuführen.

Dies ist das Ende dieses Artikels über die Verwendung und Demonstration von ref in Vue. Weitere Informationen zur Verwendung von ref in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!