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

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

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

Vue.component ('somecomponent', {
    шаблон: '#somecomponent',
    реквизит: [...],

   ...

    created: function () {
        somevariablehere.querySelector ('ввод'). focus ();
    }
});

Snewedon

Ответов: 6

Ответы (6)

Есть несколько вариантов в зависимости от того, к чему вы пытаетесь получить доступ:

  • Вы можете получить доступ к дочерним компонентам компонента Vue.js с помощью this. $ Children

  • Вы можете пометить определенные элементы DOM внутри своего шаблона, используя ref = "uniqueName", и ссылаться на них позже через this. $ Refs.uniqueName
    (но помните, что вы не сможете ссылаться на них, пока компонент / приложение не будет завершено монтирование и не выполнит начальный рендеринг)

  • Если вы не можете пометить свои элементы, вы можете запросить DOM для дочерних элементов с помощью селектора CSS через this. $ El.querySelector ('. MyClass> .childElement')
    (как указано выше, компонент / приложение должны иметь готовый монтаж)

Вы также можете исследовать, выполнив простой console.log (this) внутри вашего компонента, и он покажет вам все свойства вашего экземпляра компонента Vue.

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

vuejs 2

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

Composition API

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

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

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

Vue 2.x

Для служебной информации:

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

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

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


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

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

Ответы непонятны:

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

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

новый Vue ({
  el: '#app',
  установлен: function () {
    var childSpanClassAttr = this. $ refs.someName.getAttribute ('класс');
    
    console.log (' был объявлен с атрибутом "class" attr ->', childSpanClassAttr);
  }
})


Родитель. Дочерний диапазон

$ refs и v-for

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

новый Vue ({
  el: '#app',
  данные: {
    возраст: [11, 22, 33]
  },
  установлен: function () {
    console.log (" свой текст ....:", this. $ refs.mySpan [0] .innerText);
    console.log (" два текста ....:", this. $ refs.mySpan [1] .innerText);
    console.log (" три текста ..:", this. $ refs.mySpan [2] .innerText);
  }
})
диапазон {display: inline-block; граница: сплошной красный 1px; }


Родитель.
Возраст: {{age}}

2022 WebDevInsider