VueJs получает элемент внутри компонента

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

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

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

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

   ...

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

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

Ответ 1

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

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

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

Ответ 2

vuejs 2

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

Ответ 3

В Vue2 помните, что вы можете получить доступ к этому. $refs.uniqueName только после установки компонента.

Ответ 4

Ответы не дают понять:

Используйте 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/[email protected]/dist/vue.min.js"></script>

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