Saya memiliki komponen, bagaimana cara memilih salah satu elemennya?

Saya mencoba untuk mendapatkan input yang ada di dalam template komponen ini.

Mungkin ada beberapa komponen sehingga queryselector hanya harus mengurai contoh komponen saat ini.

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

   ...

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

Terima kasih sebelumnya

Anda dapat mengakses turunan dari komponen vuejs dengan this.$children. jika Anda ingin menggunakan pemilih kueri pada contoh komponen saat inithis.$el.querySelector(...)

hanya melakukan yang sederhana console.log(this)akan menunjukkan kepada Anda semua properti dari instance komponen vue.

Selain itu jika Anda mengetahui elemen yang ingin Anda akses dalam komponen Anda, Anda dapat menambahkan v-el:uniquenamedirektif ke dalamnya dan mengaksesnya melaluithis.$els.uniquename

vuejs 2

v-el:el:uniquenametelah diganti oleh ref="uniqueName". Elemen tersebut kemudian diakses melalui this.$refs.uniqueName.

Jawabannya tidak memperjelas:

Gunakan this.$refs.someName, tetapi, untuk menggunakannya, Anda harus menambahkan ref="someName"induk .

Lihat demo di bawah.

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

Perhatikan bahwa ketika digunakan bersama dengan v-for, this.$refs.someName akan menjadi sebuah array:

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>

Di Vue2 ketahuilah bahwa Anda dapat mengakses ini. $ Refs.uniqueName hanya setelah memasang komponen.

Vue 2.x

Untuk informasi resmi:

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

Contoh sederhana:

Pada setiap Elemen Anda harus menambahkan atribut refdengan nilai yang unik

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

Untuk menargetkan penggunaan elemet itu this.$refs.foo

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

API Komposisi

Bagian referensi template memberitahu bagaimana ini telah disatukan:

• di dalam template, gunakan ref="myEl"; :ref=denganv-for
• dalam skrip, miliki const myEl = ref(null)dan tunjukkan darisetup

Referensi membawa elemen DOM dari pemasangan dan seterusnya.