给组件绑定原生事件
示例：点击文本弹出警示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给组件绑定原生事件</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<div>Child</div>'
})
var vm = new Vue({
el:'#root',
methods:{
handleClick:function(){
alert('click')
}
}
})
</script>
</body>
</html>
输出：可以正常输出，但点击没有任何效果
当给一个组件绑定一个事件时候，实际上这个事件是一个自定义的事件（鼠标点击触发的事件并不是真正绑定的事件）
想触发自定义事件，给子组件的元素进行事件绑定，这个事件才是真正原生的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给组件绑定原生事件</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
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')
}
}
})
</script>
</body>
</html>
输出：点击 click ---子组件监听到自身的 DIV 被点击---向外触发自定义事件---在组件里监听到自定义事件---
handleClick 事件被执行
更加简便的方法
添加 .native 修饰符，这时就会触发原生事件，而不是自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给组件绑定原生事件</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<div>Child</div>',
})
var vm = new Vue({
el:'#root',
methods:{
handleClick:function(){
alert('click')
}
}
})
</script>
</body>
</html>
输出：