解决uniapp编译的微信小程序不支持v-bind=“$attrs“-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决uniapp编译的微信小程序不支持v-bind=“$attrs“。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 环境

原生组件无法支持v-bind;用户自定义组件以及第三方扩展组件才支持v-bind

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>

2.其他属性

虽然小程序不知持$attrs属性，但是我们还是可以用v-bind

解决方法

父组件主动传递其他属性attrs

// 父组件
<GdFormComponents 
  v-model="formData[val.props.gdSearchItemProp]" 
  :componentName="val.props.gdChildren[0].componentName" 
  :attrs="val.props.gdChildren[0].props"
/>

v-bind=“attrs”

<template>
    <uni-easyinput v-model="value" v-bind="attrs"></uni-easyinput>
</template>

<script setup lang='ts'>
import  {  type PropType, computed } from 'vue'

const props = defineProps({
    modelValue: String as PropType<any>,
    componentName: String,
    attrs: {
        type: Object as PropType<AnyObject>,
        default: () => ({})
    }
})

const  emits = defineEmits(['update:modelValue']);

const value = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits('update:modelValue', val)
  }
})

</script>

<style lang="scss" scoped>

</style>