给组件绑定原生事件
示例：点击文本弹出警示框
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >给组件绑定原生事件</ > < src="./vue.js"></ ></head><body> <div id="root"> <child @click="handleClick"></child> </div> < > Vue.component('child',{ template:'<div>Child</div>' }) var vm = new Vue({ el:'#root', methods:{ handleClick:function(){ alert('click') } } }) </ ></body></html>输出：可以正常输出，但点击没有任何效果
当给一个组件绑定一个事件时候，实际上这个事件是一个自定义的事件（鼠标点击触发的事件并不是真正绑定的事件）
想触发自定义事件，给子组件的元素进行事件绑定，这个事件才是真正原生的事件
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >给组件绑定原生事件</ > < src="./vue.js"></ ></head><body> <div id="root"> <child @click="handleClick"></child> </div> < > Vue.component('child',{ template:'<div @click="handleChildClick">Child</div>', methods:{ handleChildClick:function(){ this.$emit('click') //触发自定义事件 } } }) var vm = new Vue({ el:'#root', methods:{ handleClick:function(){ alert('click') } } }) </ ></body></html>输出：点击 click ---子组件监听到自身的 DIV 被点击---向外触发自定义事件---在组件里监听到自定义事件---
handleClick 事件被执行
更加简便的方法
添加 .native 修饰符，这时就会触发原生事件，而不是自定义事件
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >给组件绑定原生事件</ > < src="./vue.js"></ ></head><body> <div id="root"> <child @click.native="handleClick"></child> </div> < > Vue.component('child',{ template:'<div>Child</div>', }) var vm = new Vue({ el:'#root', methods:{ handleClick:function(){ alert('click') } } }) </ ></body></html>输出：
继续阅读与本文标签相同的文章
-
初识 Spring(05)---(Annotation注解)
2026-05-26栏目： 教程
-
初识 Spring(04)---(bean属性)
2026-05-26栏目： 教程
-
初识 Spring(01)---(浅谈 Spring 框架)
2026-05-26栏目： 教程
-
初识 Spring(03)---(XML注入方式 / 注入类型)
2026-05-26栏目： 教程
-
Java 学习（28）---(线程的控制 / 生命周期 /解决安全问题）
2026-05-26栏目： 教程