乐趣区

Vue事件修饰符native和self

jiezi

事出有因

之前面试被问到的 native 和 self 相关问题，self 我觉得自己应该能回答出来，可能被之前一小时的问题整懵逼了。尴尬~~
自己研究了一下，不足之处望补充，相互进步

native

修饰符native，有什么用

  1. native是原生事件(第一反应，当时没然后了 …)

恶补一下

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

注意点

  1. 当 <Son @click='handler1'></Son>，子组件中的this.$listeners 返回的是{click: ƒ}，box1 的 dom 上没有绑定 click 事件（可以打开 F12 查看），所以这个事件不是原生的click
  2. 当 <Son @click.native='handler1'></Son>，子组件中的this.$listeners 返回的是{}，box1 的 dom 上绑定了 click 事件（可以打开 F12 查看），所以这个事件是原生的click
  3. 当 <Son @click.self='handler1'></Son>，子组件中的this.$listeners 返回的是{click: ƒ}，box1 的 dom 上没有绑定 click 事件（可以打开 F12 查看），所以这个事件不是原生的click
  4. 子组件的 this.$emit('eventTpye') 是从 this.$listeners 返回值中查找的

为什么有时候组件点击事件不会生效
猜测

  1. 子组件 html 标签没有定义 click 原生事件
  2. 子组件没有执行this.$emit('click')

所以

  1. 直接 .native 将事件绑定到子组件 html 标签上，类似dom.addEventListener('click', handler)

self

作用

引用官方说明

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

结合代码说明

<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>
  1. 就是利用 e.target 和 e.currentTarget，当添加self 时，只有当两者相等时才会触发回调
退出移动版