【每日知识】Vue事件修饰符.native

问题
在写代码时注意到click事件的native修饰符，如下：

<el-dropdown-item divided @click.native="logout">
     <span style="display:block;">退出登录</span>
</el-dropdown-item>

这里的native是什么，有什么用？

事件修饰符native

.native修饰符的作用
.native事件修饰符是用来是在父组件中给子组件（自定义组件）绑定一个原生的事件，就将子组件变成了普通的HTML标签看待。

在监听原生事件的同时，设置一个.native修饰符，这样就可以正常监听了

应用场景：

给按钮设置点击事件：

<button @click="logout()">退出</button>     <--! 事件操作成功 /-->

@click是vue事件绑定操作，具体是给普通的html标签使用的。

给下拉组件项设置点击事件：

<el-dropdown-item @click="logout()">退出</el-dropdown-item>   <--! 事件操作失败 /-->

el-dropdown-item本身是一个“组件”，组件是很多html标签的集合体，给这个集合体绑定事件，但是不知道具体给到哪个标签使用，因此事件绑定失败。

解决方案：

给事件绑定设置一个名称为native的修饰符(事件修饰符)，使得该事件作用到内部的html标签身上：

<el-dropdown-item @click.native="logout()">退出</el-dropdown-item>   <--! 事件操作成功 /-->

对于自定义的组件，如果添加@click而不加.native，我们点击这个组件，logout会执行吗？带着以上问题我们接着往下看。

经过测试我们发现当在父组件中给自定义组件添加@click而不加.native修饰时，点击不会被触发。这是因为自定义事件内部并没有$emit这个click事件。而对于内置dom元素（例如div, button,p,.......） vue会自动绑定系统事件（click, mouseenter，.....）。所以对于普通的自定义的组件我们要自己处理。