官方的例子是晦涩难懂的，除非已经完全理解了，在这里给大家只用通俗易懂的3个例子解释这个问题
第一个例子
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将原生事件绑定到组件
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div>Child</div>'
})
var vm = new Vue({
el: '#app',
methods:{
handleClick() {
alert('click');
}
}
})
</script>
</body>
</html>
会出现点击Child的时候alert弹出一个click吗？
不会！根本不弹出来，我们的click监听加在了自定义组件，是无法触发的，还记得怎么触发自定义组件的监听吗？那是在子组件调用$emit方法。
那么我们需要在原生组件加监听怎么做呢？在这里，你可以在template里面直接加上，代码如下
第二个例子
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将原生事件绑定到组件
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<child></child>
</div>
<script>
Vue.component('child', {
template: '<div @click="handleClick">Child</div>',
methods:{
handleClick() {
alert('click');
}
}
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>这样点击click就可弹出alert对话框了，或者methods写在全局，然后子组件this.$emit去触发执行也可以达到效果，但是这样结构太混乱了，几层传递太麻烦了，能不能一步到位？
当然也是可以的，就像第一个例子，在自定义组件上面写监听，我就想监听这个组件里面模板的东西，可以直接在自定义组件写@click.native
第三个例子
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将原生事件绑定到组件
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div>Child</div>'
})
var vm = new Vue({
el: '#app',
methods:{
handleClick() {
alert('click');
}
}
})
</script>
</body>
</html>这样就完成啦，推荐这种写法！
官方文档见这里 将原生事件绑定到组件
