Bir bileşenim var, bileşenlerinden birini nasıl seçebilirim?

Bu bileşenin şablonunda bulunan bir girdi almaya çalışıyorum.

Birden fazla bileşen olabilir, bu nedenle sorgu seçici yalnızca bileşenin geçerli örneğini ayrıştırmalıdır.

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

   ...

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

Şimdiden teşekkürler

ile bir vuejs bileşeninin alt öğelerine erişebilirsiniz this.$children. geçerli bileşen örneğinde sorgu seçiciyi kullanmak istiyorsanızthis.$el.querySelector(...)

sadece basit bir işlem yapmak console.log(this)size bir vue bileşeni örneğinin tüm özelliklerini gösterecektir.

ayrıca, bileşeninizde erişmek istediğiniz öğeyi biliyorsanız, v-el:uniquenameyönergeyi ona ekleyebilir ve şu yolla ona erişebilirsiniz:this.$els.uniquename

vuejs 2

v-el:el:uniquenameile değiştirildi ref="uniqueName". Öğeye daha sonra erişilir this.$refs.uniqueName.

Cevaplar netleştirmiyor:

Kullanın this.$refs.someName, ancak kullanmak için üst öğe eklemenizref="someName" gerekir .

Aşağıdaki demoya bakın.

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

İle bağlantılı olarak kullanıldığı zaman o Uyarı v-for, this.$refs.someName bir dizi olacaktır:

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>

In vue2 Erişebildiğiniz unutmayın bu. $ Refs.uniqueName sadece bileşeni montaj sonrasında.

Vue 2.x

Resmi bilgiler için:

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

Basit bir Örnek:

Herhangi bir Eleman üzerinde benzersiz bir değereref sahip bir öznitelik eklemeniz gerekir

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

Bu elemet kullanımını hedeflemek için this.$refs.foo

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

Kompozisyon API'si

Şablon referansları bölümü bunun nasıl birleştirildiğini anlatır:

• şablon içinde kullanın ref="myEl"; :ref=Birliktev-for
• komut dosyası içinde, bir var const myEl = ref(null)ve onusetup

Referans, DOM elemanını montajdan itibaren taşır.