uniapp框架在前端开发中，组件是最为常见也是使用频率最大的功能。

在组件中单个v-model数据双向绑定是常见的需求，那么多个v-model在setup中要如何是呢？

本篇文章就来介绍uniapp框架中语法糖模式如何实现多个v-model效果。

一、创建子组件childmodel

    在创建的子组件childmodel.vue中，添加多个v-model并实现参数实时传递给父级。

<template>
	<view class="">
		<input
			:value="inputValue1"
			@input="emit('update:inputValue1', $event.target.value)"
			placeholder="第一个双向绑定"
		/>
		<input
			:value="inputValue2"
			@input="emit('update:inputValue2', $event.target.value)"
			placeholder="第二个双向绑定"
		/>
	</view>
</template>
<script setup>
	const emit = defineEmits(['update:inputValue1','update:inputValue2']);
</script>

二、父级页面

    在父级页面中，定义两个需要双向绑定的参数。

<template>
	<view class="">
		<childmodel v-model:inputValue1="inputValue1" v-model:inputValue2="inputValue2"></childmodel>
		第一个inputValue1值：{{inputValue1}}
		第二个inputValue2值：{{inputValue2}}
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import childmodel from "./childmodel.vue"
	const inputValue1 =ref('')
	const inputValue2 =ref('')
</script>

三、代码说明

    1、defineEmits配置对应方法名。

    2、父级需要定义出对应的两个参数