У меня есть компонент, как мне выбрать один из его элементов?

Я пытаюсь получить входные данные в шаблоне этого компонента.

Компонентов может быть несколько, поэтому селектор запросов должен анализировать только текущий экземпляр компонента.

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

   ...

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

заранее спасибо

вы можете получить доступ к дочерним элементам компонента vuejs с помощью this.$children. если вы хотите использовать селектор запросов в текущем экземпляре компонента, тогдаthis.$el.querySelector(...)

простое выполнение console.log(this)покажет вам все свойства экземпляра компонента vue.

Кроме того, если вы знаете элемент, к которому хотите получить доступ в своем компоненте, вы можете добавить v-el:uniquenameк нему директиву и получить к нему доступ черезthis.$els.uniquename

vuejs 2

v-el:el:uniquenameбыл заменен на ref="uniqueName". Затем доступ к элементу осуществляется через this.$refs.uniqueName.

Ответы не проясняют:

Используйте this.$refs.someName, но, чтобы использовать его, вы должны добавить ref="someName"родительский .

См. Демонстрацию ниже.

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

Обратите внимание, что при использовании вместе с v-for, это this.$refs.someName будет массив:

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>

В Vue2 имейте в виду, что вы можете получить доступ к this. $ Refs.uniqueName только после монтирования компонента.

Vue 2.x

Для официальной информации:

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

Простой пример:

На любом элементе вы должны добавить атрибут refс уникальным значением

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

Чтобы настроить таргетинг на этот элемент, используйте this.$refs.foo

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

Composition API

В разделе шаблонов ссылок рассказывается, как это было унифицировано:

• в шаблоне используйте ref="myEl"; :ref=сv-for
• внутри скрипта иметь const myEl = ref(null)и выставлять его изsetup

Ссылка переносит элемент DOM с момента монтажа.