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

2019-11-19 11:12:17

字体：大中小

来源：转载

供稿：网友

事出有因

之前面试被问到的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>

注意点

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

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

猜测

子组件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时，只有当两者相等时才会触发回调

总结

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

上一篇：微信小程序在ios下Echarts图表不能滑动的问题解决

下一篇：如何自定义微信小程序tabbar上边框的颜色