vue中的.native修饰符

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>