备注:
1.v-model虽然是双向数据绑定,但在uniapp中,父子组件之间多半是单向数据流通,需双向数据子组件通过 emit(‘update:xxx’,xxxValue);来向父组件传递数据。
2. 改变v-model对应父组件的data对象,改为本子组件的data对象值,尽量别再使用父组件通过传递过来的已定义对象值。

--父组件	
	<template>
		<son-component v-model:code="form.code"/>
	</template>
	
	<script lang="ts" setup>
		import {reactive} from 'vue';
		interface formParamet{
			phone:string;
			code:string;
		}
		const form = reactive<formParamet>({
			phone:'',
			code:''
		});
	</script>

-- 子组件
<template>
	<input type="number" v-model="codeValue"/>
</template>

<script lang="ts" setup>
	import {ref,computed} from 'vue';

    // 接收父组件的值
	const props = defineProps<{
	  code: string;
	}>();
	
	// 通过 update 事件去更新父组件的 code 值
	const emit = defineEmits<{
		(e:'update:code',value: string):void;
	}>();

	 // 通过计算属性来执行 emit 事件
	 const codeValue = computed({
		get() {
			return props.code;
		},
		set(value: string) {
			emit('update:code', value);
		}
	});
</script>
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐