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

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

html 复制代码

<!-- 这两行代码 -->
<filter-query :value.sync="showFilterStatus">

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

<!-- 实际上被 Vue 编译为 -->
<filter-query 
  :value="showFilterStatus" 
  @update:value="showFilterStatus = $event"
>

然后在子组件中

javascript 复制代码

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

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

v-model：

为表单输入设计的语法糖
默认行为

html 复制代码

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

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

html 复制代码

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

子组件中

html 复制代码

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

：prop.sync：

为任意属性的双向绑定设计，更通用，不限于表单场景
默认行为（这个不可重新配置）

html 复制代码

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

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

javascript 复制代码

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

javascript 复制代码

// 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方法

javascript 复制代码

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

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

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

javascript 复制代码

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

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

javascript 复制代码

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