事出有因
之前面試被問到的native和self相關(guān)問題，self我覺得自己應(yīng)該能回答出來，可能被之前一小時(shí)的問題整懵逼了。尷尬~~
自己研究了一下，不足之處望補(bǔ)充，相互進(jìn)步
native
修飾符native，有什么用
惡補(bǔ)一下
結(jié)合代碼說得明白
<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)
為什么有時(shí)候組件點(diǎn)擊事件不會(huì)生效
猜測(cè)
所以
直接.native將事件綁定到子組件html標(biāo)簽上，類似dom.addEventListener('click', handler)
self
作用
引用官方說明
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) --><!-- 即事件不是從內(nèi)部元素觸發(fā)的 --><div v-on:click.self="doThat">...</div>
結(jié)合代碼說明
<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é)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
