Vue事件修饰符native、self示例详解-偶像资源网

事出有因

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

native

修饰符native，有什么用

native是原生事件(第一反应，当时没然后了…)

恶补一下

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>

注意点

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

猜测

子组件html标签没有定义click原生事件
子组件没有执行this.$emit(\’click\’)

所以

直接.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时，只有当两者相等时才会触发回调

总结

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Vue事件修饰符native、self示例详解

请登录后发表评论