javascript - Vue键盘事件为何要加上native？

问题描述

<template>

<el-form :model='ruleForm2' :rules='rules2' ref='ruleForm2' label-position='left' label- > <h3 class='title'>系统登录</h3> <el-form-item prop='account'><el-input type='text' v-model='ruleForm2.account' auto-complete='off' placeholder='账号'></el-input> </el-form-item> <el-form-item prop='password'><el-input type='password' v-model='ruleForm2.password' auto-complete='off' placeholder='密码' @keyup.enter.native='handleSubmit2'></el-input> </el-form-item> <el-form-item style='width:100%;'><el-button type='primary' @click.native.prevent='handleSubmit2' :loading='logining' >登录</el-button> </el-form-item></el-form>

</template>

@keyup.enter这里必须加上 .native 才能生效.

问题解答

因为你@keyup.enter是写在一个封装好的组件上 如果你写在一个input上就不需要.native 至于为什么，请参考vue文档

给组件绑定原生事件采用的方法

@ 这个东西实际上是 v-on 的简写，而 v-on 则是对 Vue 的事件体系封装后的 API 接口。

Vue 的官方文档中指出了，Vue 使用的是一套自己的事件传递机制，如 @click 等事件是经过 Vue 封装的。因此，在一些实际上处理 DOM 原生事件的场合才需要添加额外的标识符。

沉了沉了....