Tôi có một thành phần, làm cách nào để chọn một trong các thành phần của nó?

Tôi đang cố gắng lấy đầu vào nằm trong mẫu của thành phần này.

Có thể có nhiều thành phần vì vậy bộ truy vấn chỉ phải phân tích cú pháp phiên bản hiện tại của thành phần.

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

   ...

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

Cảm ơn trước

bạn có thể truy cập phần con của thành phần vuejs với this.$children. nếu bạn muốn sử dụng bộ chọn truy vấn trên phiên bản thành phần hiện tại thìthis.$el.querySelector(...)

just doing a simple console.log(this) will show you all the properties of a vue component instance.

additionally if you know the element you want to access in your component, you can add the v-el:uniquename directive to it and access it via this.$els.uniquename

vuejs 2

v-el:el:uniquename has been replaced by ref="uniqueName". The element is then accessed through this.$refs.uniqueName.

Câu trả lời không làm rõ ràng:

Sử dụng this.$refs.someName, nhưng, để sử dụng nó, bạn phải thêm ref="someName"vào .

Xem demo bên dưới.

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

Lưu ý rằng khi được sử dụng cùng với v-for, this.$refs.someName sẽ là một mảng:

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>

Trong Vue2, hãy lưu ý rằng bạn có thể truy cập . $ Refs.uniqueName này chỉ sau khi gắn thành phần.

Vue 2.x

Để biết thông tin chính thức:

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

Một ví dụ đơn giản:

Trên bất kỳ Phần tử nào, bạn phải thêm một thuộc tính refcó giá trị duy nhất

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

Để nhắm mục tiêu sử dụng elemet đó this.$refs.foo

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

API thành phần

Phần giới thiệu mẫu cho biết điều này đã được thống nhất như thế nào:

• trong khuôn mẫu, sử dụng ref="myEl"; :ref=với mộtv-for
• trong script, có một const myEl = ref(null)và hiển thị nó từsetup

Tham chiếu mang phần tử DOM từ khi gắn trở đi.