Vue3去掉native修饰符导致的触发事件相关问题

发布网友发布时间：2023-06-23 21:46

共1个回答

热心网友时间：2024-11-28 17:19

在Vue2.x中v-on指令有.native修饰符，当使用.native修饰符时，会在子组件根元素上加上相应事件监听；去掉.native修饰符时，会触发子组件emit的事件。比如说：
父组件：

子组件：

在Child组件上添加click事件监听 <Child @click.native="onClick" /> ，实际会在child类上添加一个click事件监听；去掉.native修饰符 <Child @click="onClick" /> 则接受到的则是子组件onClick方法中emit的click事件。
但是在Vue3中去掉了.native修饰符。那么就有两个问题，如何监听子组件根元素上的事件，以及如何监听子组件根元素上与子组件emit同名的事件（即实现上面例子的@click.native效果）。

另外在Vue3 RFC40中： Declaring props and emits ，如果我们使用了<script setup>，那么由于defineEmits的类型推断，我们没法emit一个没有事先声明的事件，对于父组件来说就没法同时在子组件根元素上监听同名事件。因此如果有这种特殊需求，不能使用<script setup>。

写得比较绕，可能需要多看几遍。