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>

就是利用e.target和e.currentTarget，当添加self时，只有当二者相等时才会触发回调

Vue事件修饰符native和self

事出有因

native

修饰符native，有什么用

结合代码说得明白

self

做用

修饰符`native`，有什么用