Tengo un componente, ¿cómo puedo seleccionar uno de sus elementos?

Estoy tratando de obtener una entrada que esté dentro de la plantilla de este componente.

Puede haber varios componentes, por lo que el selector de consultas solo debe analizar la instancia actual del componente.

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

   ...

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

Gracias por adelantado

puede acceder a los elementos secundarios de un componente de vuejs con this.$children. si desea utilizar el selector de consultas en la instancia del componente actual, entoncesthis.$el.querySelector(...)

simplemente hacer un simple console.log(this)le mostrará todas las propiedades de una instancia de componente vue.

Además, si conoce el elemento al que desea acceder en su componente, puede agregarle la v-el:uniquenamedirectiva y acceder a él a través dethis.$els.uniquename

vuejs 2

v-el:el:uniquenameha sido reemplazado por ref="uniqueName". A continuación, se accede al elemento a través de this.$refs.uniqueName.

Las respuestas no lo dejan claro:

Use this.$refs.someName, pero, para usarlo, debe agregar ref="someName"el parent .

Vea la demostración a continuación.

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

Tenga en cuenta que cuando se usa junto con v-for, this.$refs.someName será una 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>

En Vue2, tenga en cuenta que puede acceder a este. $ Refs.uniqueName solo después de montar el componente.

Vue 2.x

Para información oficial:

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

Un ejemplo simple:

En cualquier elemento, debe agregar un atributo refcon un valor único

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

Para apuntar a ese uso de elemet this.$refs.foo

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

API de composición

La sección de referencias de la plantilla indica cómo se ha unificado esto:

• dentro de la plantilla, use ref="myEl"; :ref=con unv-for
• dentro de la secuencia de comandos, tener un const myEl = ref(null)y exponerlo desdesetup

La referencia lleva el elemento DOM desde el montaje en adelante.