之前面试被问到的native和self相关问题，self我觉得自己应该能回答出来，可能被之前一小时的问题整懵逼了。尴尬~~
自己研究了一下，不足之处望补充，相互进步
native
修饰符native，有什么用
native是原生事件(第一反应，当时没然后了...)
恶补一下
native 一定是用于自定义组件，也就是自定义的html标签
结合代码说得明白
<body> <div> <div > <Son @click='handler1'></Son> </div> </div> </body> <script> const Son = Vue.component('Son', { template: '<button @mouseover=handler2>son</button>', methods: { handler2 (e) { } } }) new Vue({ el: "#app", components: { Son }, data() { return { a: 123 } }, methods: { handler1 (e) { console.log('父级') } } }) </script>
注意点
当<Son @click='handler1'></Son>，子组件中的this.$listeners返回的是{click: ƒ}，box1的dom上没有绑定click事件（可以打开F12查看），所以这个事件不是原生的click
当<Son @click.native='handler1'></Son>，子组件中的this.$listeners返回的是{}，box1的dom上绑定了click事件（可以打开F12查看），所以这个事件是原生的click
当<Son @click.self='handler1'></Son>，子组件中的this.$listeners返回的是{click: ƒ}，box1的dom上没有绑定click事件（可以打开F12查看），所以这个事件不是原生的click
子组件的this.$emit('eventTpye')是从this.$listeners返回值中查找的
为什么有时候组件点击事件不会生效
猜测
子组件html标签没有定义click原生事件
子组件没有执行this.$emit('click')
所以
直接.native将事件绑定到子组件html标签上，类似dom.addEventListener('click', handler)
self
作用
引用官方说明
<!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>
结合代码说明
<body> <div> <div @click.self='handler1'> <Son ></Son> </div> </div> </body> <script> const Son = Vue.component('Son', { template: '<button @click=handler2>son</button>', methods: { handler2 (e) { console.log(e.target, e.currentTarget) } } }) new Vue({ el: "#app", components: { Son }, data() { return { a: 123 } }, methods: { handler1 (e) { console.log(e.target, e.currentTarget) } } }) </script>
就是利用e.target和e.currentTarget，当添加self时，只有当两者相等时才会触发回调