컴포넌트 내에서 요소를 가져 오는 VueJ

컴포넌트 내에서 요소를 가져 오는 VueJ

---

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

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

여러 구성 요소가있을 수 있으므로 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.

---

Vue2 에서는 컴포넌트를 마운트 한 후에 만 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>

참고 URL : https://stackoverflow.com/questions/37104304/vuejs-getting-an-element-within-a-component