uni 小程序实现v-model
时间: 2023-11-09 16:45:48 浏览: 40
在uni小程序中,可以通过修改v-model的写法来实现双向数据绑定。通常情况下,在父子组件之间是单向数据流通的,需要使用子组件通过emit('update:xxx',xxxValue)来向父组件传递数据。例如,父组件中可以定义一个包含code字段的data对象,并在子组件中使用v-model绑定该字段。在子组件中,通过定义props接收父组件传递的值,并使用emit事件来更新父组件的code值。具体实现代码如下所示:
```html
<!-- 父组件 -->
<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, defineProps, defineEmits } 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>
```
在这个例子中,父组件定义了一个表单对象form,其中包含一个code字段。子组件中使用v-model绑定了codeValue,通过computed属性实现了双向数据绑定。当子组件中的input值改变时,通过emit事件将新的值传递给父组件,从而实现了v-model的效果。