事件修饰符native

事件修饰符native

应用场景：

1. 给按钮设置点击事件：

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

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

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

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

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

解决方案：

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

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