关于@keyup.enter.native="handleQuery"的理解

前言

笔者在写项目时遇到了回车搜索这个问题，思考了好一会才解决。想分享给大家。 大家在做搜索框的时候，肯定会遇到这个问题。即回车搜索，但是大家在做的时候无从下手，不知道怎么将程序与回车结合起来。

1.关于@keyup.enter.native="handleQuery"

大家在学习若依框架时肯定会遇到这么一行代码

<el-form-item label="中文名称" prop="repoCnname">
  <el-input
    v-model="queryParams.repoCnname"
    placeholder="请输入中文名称"
    clearable
    @keyup.enter.native="handleQuery"
  />
</el-form-item>

在el-input框中，大家都知道 v-modal是指令绑定数据用的，placeholder是提示用的，clearable是用于删除输入框中内容。 但是@keyup.enter.native，这个东西是用来干嘛的？？？？？

他其实是一个监听键盘事件，起到的作用就是当用户在输入框中输入搜索条件后，按下回车即可执行与其对应绑定的方法。即按下回车就可执行handleQuery方法。即搜索方法。

注意：v-modal 数据层一定要在@keyup.enter.native之前！

到这也就解决了咱要处理的问题。回车实现搜索功能。

2.@keyup.enter.native跟@keyup.enter区别

在 Vue 2.0 中，为自定义组件绑定原生事件必须使用.native修饰符，只有Button 组件可以监听 click 事件。