相思资源网 Design By www.200059.com

事出有因

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

native

修饰符native,有什么用

  1. native是原生事件(第一反应,当时没然后了...)

恶补一下

  1. native 一定是用于自定义组件,也就是自定义的html标签

结合代码说得明白

<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>

注意点

  1. 当<Son @click='handler1'></Son>,子组件中的this.$listeners返回的是{click: "htmlcode">
    <!-- 只当在 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时,只有当两者相等时才会触发回调

    总结

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

标签:
native,vue,vue事件修饰符

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“Vue事件修饰符native、self示例详解”

暂无Vue事件修饰符native、self示例详解的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。