1. 环境
1. uniapp
2. vite + vue3 + TypeScript + vite（移动端低代码）
3. 编译成多端通用的小程序
2. 需要分两类解决
v-model属性
在高版本的vue3+vite中使用父组件传递下来的props中的某一个属性，作为当前组件的子组件的v-model入参，那么将会报错
[vite] [plugin:vite:vue] v-model cannot be used on a prop, because local prop bindings are not writable. 09:49:27.156 Use a v-bind binding combined with a v-on listener that emits update:x event instead.
正确姿势
定义一个可读可写的computed
const value = computed({
get: () => props.modelValue,
set: (val) => {
emits('update:modelValue', val)
}
})
将computed直接拿去双向绑定
<template>
<uni-easyinput v-model="value"></uni-easyinput>
</template>
完整代码
// 父组件
<GdFormComponents v-model="formData[val.props.gdSearchItemProp]" />
// 子组件 GdFormComponents
<template>
<uni-easyinput v-model="value"></uni-easyinput>
</template>
<script setup lang='ts'>
import {
type PropType, computed } from 'vue'
const props = defineProps({
modelValue: String as PropType<any>
})
const emits = defineEmits(['update:modelValue']);
const value = computed({
get: () => props.modelValue,
set: (val) => {
emits('update:modelValue', val)
}
})
</script>
<style lang="scss" scoped>
</style>
1. 环境
1. uniapp
2. vite + vue3 + TypeScript + vit
阅读背景：
解决uniapp编译的微信小程序不支持v-bind=“$attrs“
来源：互联网
分享到：
