快捷導(dǎo)航

Vue事件修飾符native、self示例詳解

更新時(shí)間：2019年07月09日 17:08:31 作者：Infinity

這篇文章主要給大家介紹了關(guān)于Vue事件修飾符native、self的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

事出有因

之前面試被問(wèn)到的native和self相關(guān)問(wèn)題，self我覺(jué)得自己應(yīng)該能回答出來(lái)，可能被之前一小時(shí)的問(wèn)題整懵逼了。尷尬~~
自己研究了一下，不足之處望補(bǔ)充，相互進(jìn)步

native

修飾符native，有什么用

native是原生事件(第一反應(yīng)，當(dāng)時(shí)沒(méi)然后了...)

惡補(bǔ)一下

native 一定是用于自定義組件，也就是自定義的html標(biāo)簽

結(jié)合代碼說(shuō)得明白

<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('父級(jí)')
   }
  }
 })

</script>

注意點(diǎn)

當(dāng)<Son @click='handler1'></Son>，子組件中的this.$listeners返回的是{click: ƒ}，box1的dom上沒(méi)有綁定click事件（可以打開(kāi)F12查看），所以這個(gè)事件不是原生的click
當(dāng)<Son @click.native='handler1'></Son>，子組件中的this.$listeners返回的是{}，box1的dom上綁定了click事件（可以打開(kāi)F12查看），所以這個(gè)事件是原生的click
當(dāng)<Son @click.self='handler1'></Son>，子組件中的this.$listeners返回的是{click: ƒ}，box1的dom上沒(méi)有綁定click事件（可以打開(kāi)F12查看），所以這個(gè)事件不是原生的click
子組件的this.$emit('eventTpye')是從this.$listeners返回值中查找的

為什么有時(shí)候組件點(diǎn)擊事件不會(huì)生效

猜測(cè)

子組件html標(biāo)簽沒(méi)有定義click原生事件
子組件沒(méi)有執(zhí)行this.$emit('click')

所以

直接.native將事件綁定到子組件html標(biāo)簽上，類(lèi)似dom.addEventListener('click', handler)

self

作用

引用官方說(shuō)明

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

結(jié)合代碼說(shuō)明

<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，當(dāng)添加self時(shí)，只有當(dāng)兩者相等時(shí)才會(huì)觸發(fā)回調(diào)

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: