vue中的.native修饰符
定义
.native事件修饰符(v-on:event.native | @event.native)是用来是在父组件中给子组件(自定义组件)绑定一个原生的事件,就将子组件变成了普通的HTML标签看待
注意:若在原生标签上使用,会报错
应用场景
给下拉组件项设置点击事件:
<el-dropdown-item @click="logout()">登出</el-dropdown-item> <--! 事件执行失败 /-->
el-dropdown-item本身是一个“自定义组件”,组件是很多html标签的集合体,给这个集合体绑定事件,但是不知道具体给到哪个标签使用,因此事件绑定失败。
解决方案:
给事件绑定设置一个名称为native的修饰符(事件修饰符),使得该事件作用到内部的html标签身上:
<el-dropdown-item @click.native="logout()">登出</el-dropdown-item> <--! 事件执行成功 /-->
vue3使用时的问题
<el-form-item class="input-content" prop="UserPass">
<el-input
placeholder="请输入密码"
prefix-icon="el-icon-s-cooperation"
show-password
v-model.trim="form.UserPass"
@keypress.native.enter="loginByUserInfo"
></el-input>
</el-form-item>
报错信息
[vue/no-deprecated-v-on-native-modifier]
‘.native’ modifier on ‘v-on’ directive is deprecated.
在 vue3 中 v-on 的该修饰符已经被弃用了
解决
vue3 移除了 v-on 的.native修饰符 添加了emits选项 有兴趣的可以去看看
这里直接去掉修饰符就行了
<el-form-item class="input-content" prop="UserPass">
<el-input
placeholder="请输入密码"
prefix-icon="el-icon-s-cooperation"
show-password
v-model.trim="form.UserPass"
@keypress.enter="loginByUserInfo"
></el-input>
</el-form-item>