vue3.3.x setup 新实验性特性 defineModel 定义多个属性

由于有些业务组件需要定义多个响应式props,类似这种(比较懒,没上ts),在vue3.3.x以前,如果不用三方库,代码会变得很繁琐

javascript 复制代码
<script setup>
	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({})
		},
		fields: {
			type: Object,
			default: () => ({})
		},
		list: {
			type: Array,
			default: () => []
		},
		loading: Boolean
	})

	const emit = defineEmits('update:modelValue', 'update:fields', 'update:list', 'update:loading')

	const onUpdateModelValue = (value) => {
		emit('update:modelValue', value)
	}

	const onUpdateLoading = (value) => {
		emit('update:loading', value)
	}

	// ...
</script>

正好vue3.3.x更新了新apiuseModel(原本使用的vueuse的useVModel),于是做出如下调整

javascript 复制代码
<script setup>
	import { useModel } from 'vue'
	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({})
		},
		fields: {
			type: Object,
			default: () => ({})
		},
		list: {
			type: Array,
			default: () => []
		},
		loading: Boolean
	})

	const emit = defineEmits('update:modelValue', 'update:fields', 'update:list', 'update:loading')

	const modelValue = useModel(props, 'modelValue')
	const fields = useModel(props, 'fields')
	const list = useModel(props, 'list')
	const loading = useModel(props, 'loading')
</script>

虽然用了vue3.3.x的新特性useModel,但是还是需要定义emit,所以代码还是觉得有点多,然后想到了跟useModel一起发布的defineModel,但是百度了一圈,都只有ts版本的defineModel,而且大部分是单个响应式props,多个属性的响应式配置完全摸不着头脑,于是只能去找找源码,还好源码注释很详细,被我找到了解决方案,具体实现如下

javascript 复制代码
<script setup>
	import { defineModel } from 'vue' // 好像可以引入

	const modelValue = defineModel({ type: Object, default: () => ({}) })
	const fields = defineModel('fields', { type: Object, default: () => ({}) })
	const list = defineModel('list', { type: Array, default: () => [] })
	const loading = defineModel('loading', { type: Boolean })
</script>
相关推荐
知识分享小能手13 小时前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
咔咔一顿操作1 天前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
汪叽家的兔子羡2 天前
vue模块化导入
前端·javascript·vue.js·typescript·vue3·vue2·vite
朝阳395 天前
vue3【组件封装】超级表单 S-form.vue
vue3·组件封装
清岚_lxn10 天前
vue3 antd modal对话框里的前端html导出成pdf并下载
pdf·vue3·html2canvas·jspdf
伍哥的传说14 天前
Vue3 Anime.js超级炫酷的网页动画库详解
开发语言·前端·javascript·vue.js·vue·ecmascript·vue3
科技D人生14 天前
Vue.js 学习总结(18)—— Vue 3.6.0-alpha1:性能“核弹“来袭,你的应用准备好“起飞“了吗?!
前端·vue.js·vue3·vue 3.6·vue3.6
伍哥的传说16 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
JosieBook16 天前
【前端】Vue3 前端项目实现动态显示当前系统时间
前端·vue3·系统时间
摆烂式编程17 天前
APP端定位实现(uniapp Vue3)(腾讯地图)
uni-app·app·vue3·定位·腾讯