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标签是没有任何作用的。
