官方的例子是晦澀難懂的，除非已經完全理解了，在這裏給大家只用通俗易懂的3個例子解釋這個問題
第一個例子
<!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裏面直接加上，代碼如下
第二個例子
<!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
第三個例子
<!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>
這樣就完成啦，推薦這種寫法！
官方文檔見這裏 將原生事件綁定到組件
關注、留言，我們一起學習。
===============Talk is cheap, show me the code================