木灵鱼儿

木灵鱼儿

阅读:144

最后更新:2021/08/19/ 17:54:42

.native修饰符 做了什么

估计也就只有我这个憨憨一直以为native会自动将事件传给组件的input那些元素,比如按键事件啊,点击事件啊。

然后,我就一直很好奇,他是怎么做到准确绑定的?

然而事实上,他就是一次事件的绑定而已。

<base-input v-on:focus="onFocus"></base-input>

base-input

<template>
  <div class="input-item">
    <input type="text">
  </div>
</template>

默认情况下,v-on作用在自定义组件时,并不是绑定了真实的focus原生dom事件,它只不过是创建了一个focus函数,并作为数据传给了组件内部。

组件的内部通过$emit("focus")来触发这个事件。

所以这就是一个虚假的事件。

但是,如果子组件里面没有通过$emit("focus")来触发这个事件,那么这个事件永远不会触发,这种情况是存在且普遍的。

比如: 第三方的组件,作者肯定无法将所有的使用情况都写进去,总会有你要用到,比如我想要个按键事件,一般的input组件就不会预先写好。

所以,才需要使用.native修饰符。

.native做了啥?

它将你写的事件,作为真实dom事件传递给了组件的第一个html元素,然后第一个html元素就会绑定对应的事件。

为什么子元素也能触发绑定的事件?

因为事件冒泡了。

所以它给了我一种错觉,让我以为事件绑定到了input元素上,实际上绑定的是第一个html元素。

所以,native只适用于自定义组件,并且,事件必须是原生dom事件,否则就会无效。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 144

相关文章