구성 요소가 있습니다. 구성 요소 중 하나를 어떻게 선택할 수 있습니까?

이 구성 요소의 템플릿 내에있는 입력을 얻으려고합니다.

여러 구성 요소가있을 수 있으므로 queryselector는 구성 요소의 현재 인스턴스 만 구문 분석해야합니다.

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

   ...

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

미리 감사드립니다

.NET을 사용하여 vuejs 구성 요소의 자식에 액세스 할 수 있습니다 this.$children. 현재 구성 요소 인스턴스에서 쿼리 선택기를 사용하려면this.$el.querySelector(...)

그냥 간단하게 console.log(this) vue 구성 요소 인스턴스의 모든 속성이 표시됩니다.

또한 구성 요소에서 액세스하려는 요소를 알고 있으면 v-el:uniquename지시문을 추가하고 다음을 통해 액세스 할 수 있습니다.this.$els.uniquename

vuejs 2

v-el:el:uniquename이 (가)로 대체되었습니다 ref="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 에서는 컴포넌트를 마운트 한 후에 만 this. $ refs.uniqueName에 액세스 할 수 있습니다 .

Vue 2.x

공식 정보 :

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

간단한 예 :

모든 요소 ref에 고유 한 값을 가진 속성을 추가해야 합니다.

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

해당 elemet 사용을 타겟팅하려면 this.$refs.foo

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

구성 API

템플릿 참조 섹션은 이것이 어떻게 통합되었는지 알려줍니다.

• 템플릿 내에서 ref="myEl"; :ref=와 함께v-for
• 스크립트 내 const myEl = ref(null)에서setup

참조는 마운트부터 DOM 요소를 전달합니다.