Erläuterung des Vue.js $refs-Anwendungsfalls

<div id="app">
    <component-father ref="outsideComponentRef"></component-father>
</div>

<Skript>
    var refoutsidecomponentTem = {
        Vorlage: "<div class='childComp'><h5>{{test}}</h5></div>",
        Daten(){
            zurückkehren {
                Test: „Ich bin eine untergeordnete Komponente“
            }
        }
    };

    neuer Vue({
        el: "#app",
        Komponenten:
            "Komponenten-Vater": refoutsidecomponentTem
        },
        montiert:Funktion () {
            console.log(diese); // #app Vue-Instanz console.log(diese.$refs.outsideComponentRef); // VueComponent Vue-Instanz console.log(diese.$refs.outsideComponentRef.test); // „Ich bin eine untergeordnete Komponente“
        }
    });
</Skript>

<div id="app">
    <Komponentenvater></Komponentenvater>
    <p ref="outsideComponentRef">p-Tag</p>
</div>

<Skript>
    var refoutsidecomponentTem = {
        Vorlage: "<div class='childComp'><h5>{{test}}</h5></div>",
        Daten(){
            zurückkehren {
                Test: „Ich bin eine untergeordnete Komponente“
            }
        }
    };

    neuer Vue({
        el: "#app",
        Komponenten:
            "Komponenten-Vater": refoutsidecomponentTem
        },
        montiert:Funktion () {                
            console.log(this.$refs.outsideComponentRef); // Gibt das Objekt "<p>p-Objekt</p>" zurück}
    });
</Skript>