.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事件，否则就会无效。