Ho un componente, come posso selezionare uno dei suoi elementi?

Sto cercando di ottenere un input che si trova all'interno del modello di questo componente.

Potrebbero esserci più componenti, quindi il queryselector deve analizzare solo l'istanza corrente del componente.

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

   ...

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

Grazie in anticipo

puoi accedere ai figli di un componente vuejs con this.$children. se si desidera utilizzare il selettore di query sull'istanza del componente corrente, allorathis.$el.querySelector(...)

solo facendo un semplice console.log(this) ti mostrerà tutte le proprietà di un'istanza del componente vue.

inoltre se conosci l'elemento a cui vuoi accedere nel tuo componente, puoi aggiungervi la v-el:uniquenamedirettiva e accedervi tramitethis.$els.uniquename

vuejs 2

v-el:el:uniquenameè stato sostituito da ref="uniqueName". Si accede quindi all'elemento tramite this.$refs.uniqueName.

Le risposte non sono chiare:

Usa this.$refs.someName, ma, per usarlo, devi aggiungere ref="someName"il genitore .

Guarda la demo di seguito.

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 e v-for

Si noti che quando viene utilizzato insieme a v-for, this.$refs.someName sarà un array:

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>

In Vue2 tieni presente che puoi accedere a $ refs.uniqueName solo dopo aver montato il componente.

Vue 2.x

Per informazioni ufficiali:

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

Un semplice esempio:

Su qualsiasi elemento devi aggiungere un attributo refcon un valore univoco

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

Per indirizzare quell'uso di elemet this.$refs.foo

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

API di composizione

La sezione dei modelli di riferimento spiega come questo è stato unificato:

• all'interno del modello, usa ref="myEl"; :ref=con unv-for
• all'interno dello script, avere un const myEl = ref(null)ed esporlo dasetup

Il riferimento trasporta l'elemento DOM dal montaggio in poi.