事出有因
之前面试被问到的native和self相关问题，self我觉得自己应该能回答出来，可能被之前一小时的问题整懵逼了。尴尬~~
自己研究了一下，不足之处望补充，相互进步
native
修饰符native，有什么用
恶补一下
结合代码说得明白
<body>
<div id="app">
<div class="box" >
<Son @click='handler1'></Son>
</div>
</div>
</body>
<script>
const Son = Vue.component('Son', {
template: '<button @mouseover=handler2 class="box1">son</button>',
methods: {
handler2 (e) {
}
}
})
new Vue({
el: "#app",
components: {
Son
},
data() {
return {
a: 123
}
},
methods: {
handler1 (e) {
console.log('父级')
}
}
})
</script>
注意点
为什么有时候组件点击事件不会生效
猜测
所以
直接.native将事件绑定到子组件html标签上，类似dom.addEventListener('click', handler)
self
作用
引用官方说明
<!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>
结合代码说明
<body>
<div id="app">
<div class="box" @click.self='handler1'>
<Son ></Son>
</div>
</div>
</body>
<script>
const Son = Vue.component('Son', {
template: '<button @click=handler2 class="box1">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时，只有当两者相等时才会触发回调
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
