Ich habe eine Komponente. Wie kann ich eines ihrer Elemente auswählen?

Ich versuche, eine Eingabe zu erhalten, die in der Vorlage dieser Komponente enthalten ist.

Es können mehrere Komponenten vorhanden sein, sodass der Abfrageselektor nur die aktuelle Instanz der Komponente analysieren muss.

Vue.component('somecomponent', {
    template: '#somecomponent',
    props: [...],

   ...

    created: function() {
        somevariablehere.querySelector('input').focus();
    }
});

Danke im Voraus

Sie können mit auf die untergeordneten Elemente einer vuejs-Komponente zugreifen this.$children. Wenn Sie den Abfrageselektor für die aktuelle Komponenteninstanz verwenden möchten, dannthis.$el.querySelector(...)

Wenn console.log(this)Sie nur eine einfache Aktion ausführen, werden alle Eigenschaften einer vue-Komponenteninstanz angezeigt.

Wenn Sie das Element kennen, auf das Sie in Ihrer Komponente zugreifen möchten, können Sie die v-el:uniquenameDirektive hinzufügen und über darauf zugreifenthis.$els.uniquename

vuejs 2

v-el:el:uniquenamewurde ersetzt durch ref="uniqueName". Auf das Element wird dann über zugegriffen this.$refs.uniqueName.

Die Antworten machen es nicht klar:

Verwenden Sie this.$refs.someName, aber um es zu verwenden, müssen Sie ref="someName"im übergeordneten Element hinzufügen .

Siehe Demo unten.

new Vue({
  el: '#app',
  mounted: function() {
    var childSpanClassAttr = this.$refs.someName.getAttribute('class');
    
    console.log('<span> was declared with "class" attr -->', childSpanClassAttr);
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  Parent.
  <span ref="someName" class="abc jkl xyz">Child Span</span>
</div>

$refs und v-for

Beachten Sie, dass , wenn in Verbindung mit v-for, der this.$refs.someName wird ein Array sein:

new Vue({
  el: '#app',
  data: {
    ages: [11, 22, 33]
  },
  mounted: function() {
    console.log("<span> one's text....:", this.$refs.mySpan[0].innerText);
    console.log("<span> two's text....:", this.$refs.mySpan[1].innerText);
    console.log("<span> three's text..:", this.$refs.mySpan[2].innerText);
  }
})

span { display: inline-block; border: 1px solid red; }

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  Parent.
  <div v-for="age in ages">
    <span ref="mySpan">Age is {{ age }}</span>
  </div>
</div>

Beachten Sie in Vue2 , dass Sie erst nach dem Mounten der Komponente darauf zugreifen können. $ Refs.uniqueName .

Vue 2.x.

Für offizielle Informationen:

https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

Ein einfaches Beispiel:

Zu jedem Element müssen Sie ein Attribut refmit einem eindeutigen Wert hinzufügen

<input ref="foo" type="text" >

Um dieses Element zu erreichen, verwenden Sie this.$refs.foo

this.$refs.foo.focus(); // it will focus the input having ref="foo"

Kompositions-API

Der Abschnitt " Vorlagenreferenzen " zeigt, wie dies vereinheitlicht wurde:

• innerhalb der Vorlage verwenden ref="myEl"; :ref=mit einerv-for
• Haben Sie im Skript ein const myEl = ref(null)und legen Sie es aussetup

Die Referenz trägt das DOM-Element ab der Montage.