简易 useVModel，useVModels，具备ts类型检查

前言

在uni-微信小程序下使用 useVModel （@vueuse/core）会报错，就自己重写了个useVModel，useVModels

代码

import { computed } from "vue";
import type { WritableComputedRef } from "vue";
/**
 * 单个属性双向绑定，存在多个属性需要双向绑定时，请使用useVModels
 * @param props
 * @param propName
 * @param emit
 * @returns
 */
export function useVModel<P extends object, K extends string & keyof P>(
	props: P,
	propName: K,
	emit: (event: `update:${K}`, ...args: any[]) => void
) {
	return computed({
		get() {
			if (
				Object.prototype.toString.call(props[propName]) === "[object Object]"
			) {
				return new Proxy(props[propName] as object, {
					set(obj, name, val) {
						emit(`update:${propName}`, Object.assign(obj, { [name]: val }));
						return true;
					},
				});
			}
			return props[propName];
		},
		set(val) {
			emit(`update:${propName}`, val);
		},
	});
}

/**
 * 多个属性双向绑定
 * @param props 
 * @param emit 
 * @returns 
 */
export function useVModels<P extends object, Name extends string>(
	props: P,
	emit?: (name: Name, ...args: any[]) => void
) {
	const ret = {} as {  
    [K in keyof P]: WritableComputedRef<object | P[K]>
  };
  
	for (const key in props) ret[key] = useVModel(props, key, emit as any)
	return ret;
} 
  

使用

// 当输入不规范时，比如：

// 单词错误 
// 类型“"modelValue1"”的参数不能赋给类型“"modelValue"”的参数。ts(2345)
// const emit = defineEmits(['update:modelValue'])
// const props = defineProps<{ modelValue: any }>()
// const modelValue = useVModel(props, 'modelValue1', emit)

// props没有这个属性 
// 类型“string”的参数不能赋给类型“never”的参数。ts(2345)
// const emit = defineEmits(['update:modelValue'])
// const props = defineProps<{ }>()
// const modelValue = useVModel(props, 'modelValue1', emit)

// emit没有update:modelValue
// 类型“(event: never, ...args: any[]) => void”的参数不能赋给类型“(event: "update:modelValue", ...args: any[]) => void”的参数。
// const emit = defineEmits(['update:modelValue'])
// const props = defineProps<{ }>()
// const modelValue = useVModel(props, 'modelValue1', emit)


// 正确使用 useVModel
// const emit = defineEmits(['update:modelValue'])
// const props = defineProps<{ modelValue: any }>()
// const modelValue = useVModel(props, 'modelValue', emit)

// 正确使用 useVModels
const props = defineProps<{ modelValue: any, cursorVisible: boolean }>()
const emit = defineEmits<{
  (e: "update:modelValue", value: any): void;
  (e: "update:cursorVisible", value: boolean): void;
}>();

const { modelValue, cursorVisible } = useVModels(props, emit)