木灵鱼儿

木灵鱼儿

阅读：338

最后更新：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事件，否则就会无效。

文章分类 vue 项目实战
文章标签 vue修饰符.native
木灵鱼儿

木灵鱼儿

发布了 583 篇文章获得点赞 0获得阅读 338

版权申明

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

one
two
three

关于作者

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

相关文章

meta name= viewport 知识补充meta name= viewport 知识补充
flex布局知识补充flex布局知识补充
vue cli3-cli4 打包后项目在二级路径的方法vue cli3-cli4 打包后项目在二级路径的方法
不同平台的回车处理 warning Delete `␍` prettier prettier不同平台的回车处理 warning Delete `␍` prettier prettier
windows下软链接和硬链接windows下软链接和硬链接