Vue事件修飾符native和self

時間 2019-11-10

標籤 vue 事件修飾 native self 简体版

原文原文鏈接

事出有因

以前面試被問到的native和self相關問題，self我以爲本身應該能回答出來，可能被以前一小時的問題整懵逼了。尷尬~~
本身研究了一下，不足之處望補充，相互進步html

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>

注意點app

當<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返回值中查找的

爲何有時候組件點擊事件不會生效
猜想dom

子組件html標籤沒有定義click原生事件
子組件沒有執行this.$emit('click')

因此函數

直接.native將事件綁定到子組件html標籤上，相似dom.addEventListener('click', handler)

self

做用

引用官方說明this

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

結合代碼說明code

<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>