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

备注:
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>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值