구성 요소가 있습니다. 구성 요소 중 하나를 어떻게 선택할 수 있습니까?
이 구성 요소의 템플릿 내에있는 입력을 얻으려고합니다.
여러 구성 요소가있을 수 있으므로 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 요소를 전달합니다.
답변
