Vue事件修饰符本机,自我示例详解

　　


　　

　　

之前面试被问到的本地和自我相关问题,自我我觉得自己应该能回答出来,可能被之前一小时的问题整懵逼了。尴尬~ ~
　　自己研究了一下,不足之处望补充,相互进步

　　

<强>本地
　　

　　

修饰符本地人,有什么用
　　

　　
    　　<李>本地是原生事件(第一反应,当时没然后了…) 　　
　　

恶补一下

　　
    　　<李>本地一定是用于自定义组件,也就是自定义的html标签 　　
　　

结合代码说得明白
　　

　　 　　 　　& lt; body> 　　& lt; div id=坝τ谩北? 　　& lt; div类="盒子"比; 　　& lt;儿子@click=' handler1祝辞& lt;/Son> 　　& lt;/div> 　　& lt;/div> 　　 　　& lt;/body> 　　& lt; script> 　　const儿子=Vue.component(‘儿子’,{ 　　模板:“& lt;按钮@mouseover=handler2类=" box1 "祝辞son”, 　　方法:{ 　　handler2 (e) { 　　 　　} 　　} 　　}） 　　新Vue ({ 　　埃尔:“#应用”, 　　组件:{ 　　儿子 　　}， 　　数据(){ 　　返回{ 　　答:123 　　} 　　}， 　　方法:{ 　　handler1 (e) { 　　console.log(“父级”) 　　} 　　} 　　}） 　　 　　& lt;/script> 　　 　　

　　
    　　<李>当& lt;儿子@click=' handler1祝辞& lt;/Son>子组件中的这个。听众美元返回的是{点击:& # 402;},box1的dom上没有绑定点击事件(可以打开F12查看),所以这个事件不是原生的点击 　　<李>当& lt;儿子@click.native=' handler1祝辞& lt;/Son>子组件中的。美元听众返回的是{},box1的dom上绑定了点击事件(可以打开F12查看),所以这个事件是原生的点击 　　<李>当& lt;儿子@click.self=' handler1祝辞& lt;/Son>子组件中的这个。听众美元返回的是{点击:& # 402;},box1的dom上没有绑定点击事件(可以打开F12查看),所以这个事件不是原生的点击 　　<李>子组件的。美元发出(eventTpye)是从。美元听众返回值中查找的李 　　
　　

<强>为什么有时候组件点击事件不会生效
　　

　　

猜测 　　

    　　<李>子组件html标签没有定义点击原生事件 　　<李>子组件没有执行。美元发出(点击) 　　
　　

所以 　　

直接.native将事件绑定到子组件html标签上,类似dom。addEventListener(“点击”,处理程序)
　　

　　

<强>自我
　　

　　

作用
　　

　　

引用官方说明

　　 　　 　　& lt; !——只当在事件。目标是当前元素自身时触发处理函数——比; 　　& lt; !——即事件不是从内部元素触发的——比; 　　& lt; div v: click.self=" doThat "在……& lt;/div> 　　 　　

结合代码说明

　　 　　 　　& lt; body> 　　& lt; div id=坝τ谩北? 　　& lt; div类="盒子" @click.self=癶andler1”比; 　　& lt;儿子祝辞& lt;/Son> 　　& lt;/div> 　　& lt;/div> 　　 　　& lt;/body> 　　& lt; script> 　　const儿子=Vue.component(‘儿子’,{ 　　模板:“& lt;按钮@click=handler2类=" box1 "祝辞son”, 　　方法:{ 　　handler2 (e) { 　　console.log (e。目标,e.currentTarget) 　　} 　　} 　　}） 　　新Vue ({ 　　埃尔:“#应用”, 　　组件:{ 　　儿子 　　}， 　　数据(){ 　　返回{ 　　答:123 　　} 　　}， 　　方法:{ 　　handler1 (e) { 　　console.log (e。目标,e.currentTarget) 　　} 　　} 　　}） 　　& lt;/script> 　　 　　

就是利用e。target和e.currentTarget,当添加自我时,只有当两者相等时才会触发回调

　　

　　

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。

Vue事件修饰符本机,自我示例详解