uniapp兼容问题处理总结

1、v-mode与:value.sync，使用了v-mode后子组件中执行 this.$emit('update:value', newVal);无效，但是改成:value.sync可以

但是要注意这个是vue2，vue3中没有value.sync，vue3 整合了，实际上的v-model就是:value.sync，后面演示，先看vue2

首先两个编译后的代码都一样

<!-- 这两行代码 -->
<filter-query :value.sync="showFilterStatus"><filter-query v-model="showFilterStatus"><!-- 实际上被 Vue 编译为 -->
<filter-query :value="showFilterStatus" @update:value="showFilterStatus = $event"
>

然后在子组件中

//v-mode可以中心配置这个选项，默认的值为  prop: 'value',   event: 'input'  
model: {prop: 'value',   event: 'update:value'   
},
//这个时都要写   
props: {value: {type: Boolean,default: false}
},

上面是他们的相同点，那他们有什么不同呢：

v-model：

• 为表单输入设计的语法糖

• 默认行为

// 默认行为（无 model 配置时）
prop: 'value'
event: 'input

可以修改这个配置，比如父组件中

<filter-query v-model="showFilterStatus">

子组件中

model: {prop: 'value',event: 'update:value'
},

：prop.sync：

• 为任意属性的双向绑定设计，更通用，不限于表单场景

• 默认行为（这个不可重新配置）

// 固定模式
prop: 'value'  // 就是 .sync 前面的属性名
event: 'update:value'  // update: + 属性名

上面演示的是vue2的代码，下面看看vue3，vue3中没有value.sync，vue3 整合了，实际上的v-model就是:value.sync

<!-- 父组件 -->
<filter-query v-model:value="showFilterStatus" />

// Vue 3 自组件
const props = defineProps({value: {type: Boolean,default: false}
})const emit = defineEmits(['update:value'])const toggle = () => {emit('update:value', !props.value)
}

这里如果不写：value直接写<filter-query v-model="showFilterStatus" />的话默认编译的参数值为modeValue

衍生知识：计算属性

可以写重写计算属性的get  set方法，比如下面

通过计算属性重写get set，当设置showFilterStatus的值时会执行set方法，正常在template中使用的时候执行get方法

    computed: {showFilterStatus: {get() {return this.value;},set(newVal) {this.$emit('update:value', newVal);}}},

2、微信小程序不支持大小写自动转换

比如，在子组件中定义一个dataSource字段接收父组件传过来的值

    props: {dataSource: {type: Object,required: false,default: () => {return {}}}},

在父组件中有可能写成data-source，正常可以但是小程序中这样就不行必须写成dataSource

<NewsItem :data-source="item"></NewsItem>
//上面代码小程序中不支持
<NewsItem :dataSource="item"></NewsItem>