事出有因
之前面試被問到的native和self相關(guān)問題，self我覺得自己應(yīng)該能回答出來，可能被之前一小時的問題整懵逼了。尷尬~~
自己研究了一下，不足之處望補充，相互進步
native
修飾符native，有什么用
惡補一下
結(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('父級') } } })</script>注意點
為什么有時候組件點擊事件不會生效
猜測
子組件html標(biāo)簽沒有定義click原生事件 子組件沒有執(zhí)行this.$emit('click')所以
直接.native將事件綁定到子組件html標(biāo)簽上，類似dom.addEventListener('click', handler)
self
作用
引用官方說明
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(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時，只有當(dāng)兩者相等時才會觸發(fā)回調(diào)
新聞熱點
疑難解答
圖片精選
