uni-app子组件v-model的双向绑定
uni-app , vue3 , 百分百解决您的这个问题。
·
备注:
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>
更多推荐
已为社区贡献1条内容
所有评论(0)