vue中'. native'修饰符的使用

官网的解释：

你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。

通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。

 1 <template>
 2     <div>
 3         <my-component @click="outClick"></my-component>
 4     </div>
 5 </template>
 6 <script>
 7     import Vue from "vue"
 8 
 9     Vue.component("my-component",{
10         template:`<el-button type="primary">InnerButton</el-button>`
11     })
12 
13     export default {
14         methods:{
15             outClick(){
16                 alert("this is outer")
17             }
18         }
19     }
20 </script>

此时点击页面中的按钮无任何反应。

添加修饰符：

 1 <template>
 2     <div>
 3         <my-component @click.native="outClick"></my-component>
 4     </div>
 5 </template>
 6 <script>
 7     import Vue from "vue"
 8 
 9     Vue.component("my-component",{
10         template:`<el-button type="primary">InnerButton</el-button>`
11     })
12 
13     export default {
14         methods:{
15             outClick(){
16                 alert("this is outer")
17             }
18         }
19     }
20 </script>

此时点击就会弹窗：

可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。