×

Vue每日一学:了解下事件修饰符native和self

作者:流泪的石头2021.12.21来源:Web前端之家浏览:3892评论:0
关键词:vuejs

Vue每日一学:了解下事件修饰符native和self。

结合代码说得明白。

<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: ƒ},box1的dom上没有绑定click事件(可以打开F12查看),所以这个事件不是原生的click

  2. 当<Son @click.native='handler1'></Son>,子组件中的this.$listeners返回的是{},box1的dom上绑定了click事件(可以打开F12查看),所以这个事件是原生的click

  3. 当<Son @click.self='handler1'></Son>,子组件中的this.$listeners返回的是{click: ƒ},box1的dom上没有绑定click事件(可以打开F12查看),所以这个事件不是原生的click

  4. 子组件的this.$emit('eventTpye')是从this.$listeners返回值中查找的

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

猜测

  • 子组件html标签没有定义click原生事件

  • 子组件没有执行this.$emit('click')

所以直接.native将事件绑定到子组件html标签上,类似dom.addEventListener('click', handler)。

引用官方说明

<!-- 只当在 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时,只有当两者相等时才会触发回调。

您的支持是我们创作的动力!
温馨提示:本文作者系流泪的石头 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20211221a.html

网友评论文明上网理性发言 已有0人参与

发表评论: