Vue 3 하위 구성요소가 포커스 이벤트를 두 번 트리거하는 이유는 무엇입니까?

Question

Vue 3의 최상위 입력 필드에서 focus 이벤트를 트리거할 때:

으아악

...입력 필드에 초점이 맞춰지면(예상대로) 이벤트가 한 번 실행됩니다.

그러나 동일한 입력 필드를 하위 구성 요소에 넣고 포커스를 맞추면:

으아악

...이벤트가 두 번 실행됩니다.

https://stackblitz.com/edit/vue-wjhche?devToolsHeight=33&file=src/comComponents/HelloWorld.vue

를 참조하세요.

이런 일이 발생하는 이유를 이해하도록 도와주실 수 있나요? 감사해요!

Answer 1

따라서 하위 구성 요소나 루트 요소인 input 字段中，因为子组件已经绑定了其 focus 事件到 input ，因此 focus 事件将被调用两次，因为 input에 포커스 이벤트를 넣어서는 안 됩니다.

输入에서 포커스 이벤트를 제거하면 문제가 해결됩니다.

https://stackblitz.com/edit/vue -676vsb?file=src/comComponents/InputField.vue