在自定义组件上监听根元素原生事件时必须加 .native 修饰符，如 ；Vue 3 中已移除，需改用 v-bind="$attrs" 或 defineEmits(['click']) 显式透传或触发。
在 Vue 模板中，直接用 @click 绑定事件时，它默认监听的是组件触发的**自定义事件**，而不是底层的原生 DOM 事件。如果你需要监听子组件根元素上的原生点击、输入等行为，就得用 .native 修饰符。
什么时候必须加 .native？
当你在一个**自定义组件**上想监听其根元素的原生事件时，.native 就是关键。Vue 不会自动把 @click “穿透”到子组件的根 DOM 节点上，除非你明确告诉它：这是原生事件，别当自定义事件处理。
- 普通 HTML 标签（如
<button></button>、<input>）不需要.native，@click默认就是原生事件 - 自定义组件（比如
<mybutton></mybutton>）默认不响应@click，必须写成@click.native - 如果组件内部没有手动
$emit('click')，光写@click是无效的
.native 的基本写法
语法很简单：在事件名后加上 .native 即可。
<myinput></myinput><customlist></customlist><toggleswitch></toggleswitch>
注意：.native 只对组件有效，对原生标签加了也不会报错，但属于冗余写法，建议避免。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
Vue 3 中的变化：.native 已被移除
Vue 3 废弃了 .native 修饰符。取而代之的是通过 v-bind="$attrs" 显式透传所有属性和事件，或使用 emits 选项 + defineEmits 明确声明并触发原生事件。
- 在子组件根元素上写
v-bind="$attrs"，就能让父组件绑定的原生事件（如@click）自动落到该 DOM 上 - 更推荐的方式是：子组件主动
defineEmits(['click'])，并在合适时机emit('click')，保持事件可控 - 升级项目时需检查所有
@xxx.native，改为透传或显式 emit
小技巧：快速判断是否需要 .native
问自己三个问题：
- 这个标签是 Vue 组件（.vue 文件或全局注册的组件）吗？→ 是，可能需要
- 你希望监听的是它的 DOM 行为（比如聚焦、滚动、右键），而不是它自己发出来的业务事件？→ 是，大概率要
- 你试过不加 .native，事件没触发？→ 那基本就是缺它了
不复杂但容易忽略，加对位置就能让交互稳稳跑起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
