Mengapakah komponen kanak-kanak Vue 3 mencetuskan acara fokus dua kali?

Question

Apabila saya mencetuskan acara focus dari medan input peringkat atas dalam Vue 3:

<input @focus="$emit('focus')">

...acara itu dipecat sekali apabila medan input difokuskan (seperti yang saya jangkakan).

Tetapi apabila anda meletakkan medan input yang sama ke dalam komponen kanak-kanak dan memfokuskannya:

<InputField @focus="$emit('focus')" />

...Acara dicetuskan dua kali.

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

Bolehkah anda membantu saya memahami mengapa ini berlaku? Terima kasih!

Answer 1

Jadi anda tidak seharusnya meletakkan acara fokus dalam komponen kanak-kanak, mahupun input 字段中，因为子组件已经绑定了其 focus 事件到 input ，因此 focus 事件将被调用两次，因为 input iaitu elemen akar.

Hanya keluarkan acara fokus daripada 输入 dan masalah akan selesai.

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