Eu tenho um componente, como posso selecionar um de seus elementos?

Estou tentando obter uma entrada que está dentro do modelo deste componente.

Pode haver vários componentes, portanto, o queryselector deve apenas analisar a instância atual do componente.

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

   ...

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

desde já, obrigado

você pode acessar os filhos de um componente vuejs com this.$children. se você quiser usar o seletor de consulta na instância do componente atual, entãothis.$el.querySelector(...)

apenas fazer um simples console.log(this)mostrará a você todas as propriedades de uma instância do componente vue.

além disso, se você conhece o elemento que deseja acessar em seu componente, pode adicionar a v-el:uniquenamediretiva a ele e acessá-lo por meio dethis.$els.uniquename

vuejs 2

v-el:el:uniquenamefoi substituído por ref="uniqueName". O elemento é acessado por meio de this.$refs.uniqueName.

As respostas não estão deixando isso claro:

Use this.$refs.someName, mas, para usá-lo, você deve adicionar ref="someName"o pai .

Veja a demonstração abaixo.

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/[email protected]/dist/vue.min.js"></script>

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

$refs e v-for

Observe que, quando usado em conjunto com v-for, o this.$refs.someName será uma matriz:

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/[email protected]/dist/vue.min.js"></script>

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

No Vue2, esteja ciente de que você pode acessar este. $ Refs.uniqueName somente após montar o componente.

Vue 2.x

Para informações oficiais:

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

Um exemplo simples:

Em qualquer elemento, você deve adicionar um atributo refcom um valor único

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

Para direcionar esse elemento, use this.$refs.foo

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

API de composição

A seção de referências do modelo informa como isso foi unificado:

• dentro do modelo, use ref="myEl"; :ref=com umv-for
• dentro do script, tenha um const myEl = ref(null)e exponha-o desetup

A referência carrega o elemento DOM da montagem em diante.