.vue中.native修饰符用于在自定义组件上监听根元素的原生DOM事件，如@click.native；不加则视为需子组件$emit触发的自定义事件，否则无效。

在Vue模板中给自定义组件绑定原生DOM事件，必须加 .native 修饰符。不加的话，@click 这类事件会被当作自定义事件处理，而组件内部没 $emit 就不会触发——所以看起来“点击没反应”。

什么时候必须用 .native？

当你对一个自定义组件（比如 <el-card></el-card>、<router-link></router-link>、<my-button></my-button>）想监听 click/mouseenter/input 等浏览器原生事件时，就要加 .native。

• <el-card>内容</el-card> ✅
• <router-link to="/home">首页</router-link> ✅
• <div>普通标签不用加</div> ✅（原生元素默认就是原生事件）
• <my-comp></my-comp> ❌（不加 .native 就不会响应）

.native 的作用原理

Vue 默认把绑定在组件上的 @click 当作“子组件主动抛出的自定义事件”，需要子组件内部调用 this.$emit('click') 才能触发。而 .native 告诉 Vue：别当自定义事件了，直接把这个监听器挂到子组件的根元素上，等价于原生 addEventListener。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 它只作用于子组件最外层的 DOM 标签（比如子组件 template 是 <div>...</div>，事件就绑在那个 <div> 上） <li>子组件内部的嵌套元素点击会冒泡到根元素，所以整个组件区域都可触发</li> <li>不能用于 <code>v-model 或其他非事件指令，仅限 @xxx 类事件

常见错误和替代方案

如果加了 .native 还不生效，先检查这些点：

立即学习“前端免费学习笔记（深入）”；

• 确认你用的是自定义组件，不是原生 HTML 标签
• 子组件的根元素不能是 <template></template> 或多个同级标签（必须有唯一根节点）
• 避免滥用：如果子组件本就该响应点击，更推荐在子组件内部 @click 后 $emit，由父组件监听自定义事件——语义更清晰、解耦更好
• 紧急调试可用 ref + mounted 中手动绑定：this.$refs.myComp.$el.addEventListener('click', ...)，但不推荐日常使用

可以和其他修饰符连用

.native 支持与 .stop、.prevent、.once 等组合，顺序不影响功能。

• @click.native.stop —— 阻止事件冒泡
• @submit.native.prevent —— 阻止表单默认提交
• @keydown.enter.native —— 键盘回车触发（注意：键修饰符要放在 .native 前面）