Mam komponent, jak mogę wybrać jeden z jego elementów?

Próbuję uzyskać dane wejściowe, które znajdują się w szablonie tego składnika.

Składników może być wiele, więc selektor zapytań musi przeanalizować tylko bieżące wystąpienie składnika.

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

   ...

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

Z góry dziękuję

możesz uzyskać dostęp do elementów podrzędnych komponentu vuejs za pomocą this.$children. jeśli chcesz wtedy użyć selektora zapytania w bieżącej instancji składnikathis.$el.querySelector(...)

proste zrobienie console.log(this)tego pokaże Ci wszystkie właściwości instancji komponentu vue.

dodatkowo, jeśli znasz element, do którego chcesz uzyskać dostęp w swoim komponencie, możesz dodać do niego v-el:uniquenamedyrektywę i uzyskać do niego dostęp za pośrednictwemthis.$els.uniquename

vuejs 2

v-el:el:uniquenamezostał zastąpiony przez ref="uniqueName". Następnie uzyskuje się dostęp do elementu przez this.$refs.uniqueName.

Odpowiedzi nie wyjaśniają tego jasno:

Użyj this.$refs.someName, ale aby z niego skorzystać, musisz dodać ref="someName"rodzica .

Zobacz demo poniżej.

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

Zauważ, że użyte w połączeniu z v-for, this.$refs.someName będzie tablicą:

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>

W Vue2 pamiętaj, że możesz uzyskać dostęp do tego. $ Refs.uniqueName dopiero po zamontowaniu komponentu.

Vue 2.x

W celu uzyskania oficjalnych informacji:

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

Prosty przykład:

Do każdego elementu musisz dodać atrybut refo unikalnej wartości

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

Aby kierować na użycie tego elementu this.$refs.foo

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

Kompozycja API

Sekcja Odniesienia do szablonów mówi, jak to zostało ujednolicone:

• w szablonie, użyj ref="myEl"; :ref=zv-for
• w skrypcie, miej const myEl = ref(null)i ujawnij go zsetup

Odniesienie przenosi element DOM od momentu montażu.