uni-app子组件v-model的双向绑定

weixin_42087515

已于 2022-11-12 18:20:54 修改

阅读量7.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： uni-app vue.js javascript

于 2022-11-12 11:04:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42087515/article/details/127816897

uni-app 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在uniapp中如何实现父子组件之间的双向数据绑定，强调了v-model在uniapp中的特殊性，通常需要通过子组件的emit事件来更新父组件的数据。示例展示了父子组件的代码结构，子组件如何监听并修改v-model对应的值，以及如何通过计算属性来触发emit事件更新父组件的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

备注：
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>