У мене є компонент, як я можу вибрати один з його елементів?

Я намагаюся отримати інформацію, що знаходиться в шаблоні цього компонента.

Тут може бути декілька компонентів, тому селектор запитів повинен аналізувати лише поточний екземпляр компонента.

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 vol буде масив:

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 майте на увазі, що ви можете отримати доступ до цього. $ 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"

API складу

Розділ " Відгуки шаблонів " розповідає, як це було уніфіковано:

• в межах шаблону, використовувати ref="myEl"; :ref=зv-for
• в сценарії, мати const myEl = ref(null)і відкрити йогоsetup

Посилання містить елемент DOM від монтажу далі.