官網上是這樣描述的
你可能有很多次想要在一個組件的根元素上直接監聽一個原生事件。這時，你可以使用 v-on的 .native 修飾符
父組件App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld @click="outClick"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
methods: {
outClick (){
alert('我是父組件的方法')
}
}
}
</script>
子組件HelloWord.vue
<template>
<div class="hello">
<h1>HelloWorld</h1>
<el-button type="primary">點我</el-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>這時我們點擊子組件的按鈕是沒有反應的，如果把父組件修改如下：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld @click.native="outClick"/> <!--在單擊事件上添加.native-->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
methods: {
outClick (){
alert('我是父組件的方法')
}
}
}
</script>這時我們單擊按鈕，效果如下：
