Vue에서 $ref를 사용할 때 $el이 필요할 수 있는 이유는 무엇입니까?

Vue에서 $ref를 사용할 때 $el이 필요할 수 있는 이유는 무엇입니까?

ENTER 키를 눌렀을 때 클릭 이벤트를 트리거하기 위해 다음과 같은 코드를 사용하고 있었습니다.

<q-tab-panel name="option1" @keyup.enter.native="$refs.button.click()">
...
  <q-btn ref="button" @click="function()" />
...
</q-tab-panel>

태그는 Quasar Framework의 구성요소에 속합니다.이 코드는 얼마 전까지만 해도 작동했지만 지금은 다음과 같은 변경이 필요합니다.

<q-tab-panel name="option1" @keyup.enter.native="$refs.button.$el.click()">

즉, 이제 참조를 사용하여$refs.button.click()ENTER를 누르면 다음 오류가 발생합니다.

[Vue warn] :v-on 핸들러 오류: "TypeError: 정의되지 않은 속성 '기본 방지됨'을 읽을 수 없습니다."

이전에는 왜 작동했고 지금은 왜 작동하지 않는 거죠?Vue 버전 또는 참조가 네이티브 DOM 요소가 아닌 컴포넌트에서 사용되고 있다는 사실을 언급한 적이 있습니다.자세한 내용은 Vue.js를 사용하여 이벤트를 트리거할 수 있습니까?를 참조하십시오.나는 또한 Vue를 본 적이 있다 - 언제, 왜 $el을 사용하는가.그것은 왜 효과가 있었는지에 대한 대답이 없고, 지금은 그렇지 않다.

Vue 설명서에는 다음과 같은 내용이 나와 있습니다.$el:

Vue 인스턴스가 관리하고 있는 루트 DOM 요소입니다.

그것은 말이 되지만 왜 그것이 필요없었는지도 설명되지 않는다.이 경우 Vue 2.6.10에서 오류가 발생합니다.

현시점에서는,$refVue 컴포넌트의 인스턴스를 반환합니다. click()DOM 엘리먼트에서 호출되는 메서드입니다(다만,click메서드를 컴포넌트에 적용합니다.실제 DOM 요소가 필요합니다.$el를 위한 것입니다. $el지정된 Vue 인스턴스가 연결된 DOM 노드를 반환합니다.

즉, Vue가 이 동작을 버전 간에 변경했기 때문에 이전과 더 이상 동작하지 않는 이유를 가장 잘 알 수 있습니다.버전을 변경했을 때 Vue가 이 동작을 다른 버전으로 변경했기 때문입니다.

이전 사용 사례에서는 Vue 구성 요소가 아닌 일반적인 HTML 태그인 태그에 참조를 사용했을 수도 있습니다.이 경우,$ref는 여전히 DOM 노드를 반환합니다.

언급URL : https://stackoverflow.com/questions/58546283/why-is-el-sometimes-necessary-when-using-refs-in-vue