哈喽,大家好 我是
xy
👨🏻💻。今天给大家推荐一个 Vue3.4 中新增的defineModel
这个Api
, 真的超好用!!!
前言
随着 Vue3.4
版本的发布,defineModel
也正式转正了。它可以简化父子组件之间的双向绑定
,是目前官方推荐的双向绑定实现方式。
之前在 Vue3.3 中,该方法还是实验性
方法,使用 defineModel 需在 vite.config.ts
里面配置 defineModel
为 true
,配置如下:
export default defineConfig({
plugins: [
vue({
script: {
defineModel: true,
},
}),
],
});
但 Vue3.4
版本中已经是稳定特性了!!!
正式介绍 defineModel
defineModel 是一个新的 <script setup>
宏,旨在简化支持 v-model
的组件的实现, 这个宏用来声明一个双向绑定 prop
,通过父组件的 v-model
来使用。
它之前作为实验性功能在 Vue3.3 中发布,并在 Vue3.4
中升级为稳定
状态。现在,它还为 v-model修饰符
的使用提供了更好的支持。
defineModel 使用
例举一个最简单的使用场景: 自定义组件中使用 v-model 来进行数据的双向绑定
<!-- 父组件 -->
<template>
<div>
<!-- 自定义子组件 CustomComponent 使用 v-model 指令绑定 userName -->
<CustomComponent v-model="userName" />
</div>
</template>
<script setup>
import { ref } from "vue";
import CustomComponent from "./CustomComponent.vue";
const userName = ref("前端开发爱好者");
</script>
在 Vue3.3 版本之前,我们通常通过 props
接收 modelValue,然后在更新时,我们会将更新后的值传递给 emit
的 update:modelValue
并执行:
<!-- 子组件 CustomComponent -->
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
</script>
Vue3.4 版本之后,我们将使用 defineModel
替代子组件中的 props
和 emit
。
<!-- 子组件 CustomComponent -->
<template>
<input type="text" v-model="modelValue" />
</template>
<script setup>
const modelValue = defineModel();
</script>
带参数/定义多个 v-model
组件中可以支持定义多个 defineModel
,可以满足绑定多个双向绑定的属性
<!-- 父组件 -->
<template>
<div>
<!-- 自定义子组件 CustomComponent 使用 v-model 指令绑定 userName -->
<CustomComponent
v-model="userName"
v-model:title="title"
v-model:subTitle="subTitle"
/>
</div>
</template>
<script setup>
import { ref } from "vue";
import CustomComponent from "./CustomComponent.vue";
const userName = ref("前端开发爱好者");
const title = ref("前端开发爱好者_title");
const subTitle = ref("前端开发爱好者_subTitle");
</script>
<!-- 子组件 CustomComponent -->
<template>
<input type="text" v-model="modelValue" />
<input type="text" v-model="title" />
<input type="text" v-model="subTitle" />
</template>
<script setup>
const modelValue = defineModel();
const title = defineModel("title");
const subTitle = defineModel("subTitle");
</script>
修饰符和转换器
为了获取 v-model
指令使用的修饰符
,我们可以像这样解构
defineModel() 的返回值:
const [modelValue, modelModifiers] = defineModel()
// 对应 v-model.trim
if (modelModifiers.trim) {
// ...
}
当存在修饰符时,我们可能需要在读取或将其同步回父组件时对其值进行转换。我们可以通过使用 get
和 set
转换器选项来实现这一点:
const [modelValue, modelModifiers] = defineModel({
// get() 省略了,因为这里不需要它
set(value) {
// 如果使用了 .trim 修饰符,则返回裁剪过后的值
if (modelModifiers.trim) {
return value.trim()
}
// 否则,原样返回
return value
}
})
参考连接:
结语
defineModel
的引入标志着 Vue
在提升开发者体验方面迈出了重要的一步。现在,开发者可以更加专注于应用的逻辑
和用户体验
,而不是纠结于数据绑定的细节。让我们一起迎接 Vue 3.4 带来的更多可能性吧!
写在最后
公众号
:前端开发爱好者
专注分享web
前端相关技术文章
、视频教程
资源、热点资讯等,如果喜欢我的分享,给 🐟🐟 点一个赞
👍 或者 ➕关注
都是对我最大的支持。
欢迎长按图片加好友
,我会第一时间和你分享前端行业趋势
,面试资源
,学习途径
等等。
欢迎加我好友
,我会第一时间和你分享前端行业趋势
,面试资源
,学习途径
等等。
WX: xuxuxu_yyy
关注公众号后,在首页:
- 回复
面试题
,获取最新大厂面试资料。 - 回复
简历
,获取 3200 套 简历模板。 - 回复
React实战
,获取 React 最新实战教程。 - 回复
Vue实战
,获取 Vue 最新实战教程。 - 回复
ts
,获取 TypeScript 精讲课程。 - 回复
vite
,获取 Vite 精讲课程。 - 回复
uniapp
,获取 uniapp 精讲课程。 - 回复
js书籍
,获取 js 进阶 必看书籍。 - 回复
Node
,获取 Nodejs+koa2 实战教程。 - 回复
数据结构算法
,获取数据结构算法教程。 - 回复
架构师
,获取 架构师学习资源教程。 - 更多教程资源应有尽有,欢迎
关注获取
原文链接:https://juejin.cn/post/7348703569052647461 作者:前端开发爱好者