ฉันมีองค์ประกอบฉันจะเลือกองค์ประกอบใดองค์ประกอบหนึ่งได้อย่างไร

ฉันกำลังพยายามรับอินพุตที่อยู่ในเทมเพลตของคอมโพเนนต์นี้

อาจมีหลายองค์ประกอบดังนั้นตัวเลือกแบบสอบถามต้องแยกวิเคราะห์อินสแตนซ์ปัจจุบันของคอมโพเนนต์เท่านั้น

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:uniquenameref="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 จะเป็นอาร์เรย์:

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"

Composition API

ส่วนการอ้างอิงเทมเพลตจะบอกว่าสิ่งนี้รวมเข้าด้วยกันอย่างไร:

• ภายในเทมเพลตใช้ref="myEl"; :ref=กับv-for
• ภายในสคริปต์มีconst myEl = ref(null)และเปิดเผยจากsetup

การอ้างอิงดำเนินการองค์ประกอบ DOM ตั้งแต่การติดตั้งเป็นต้นไป