1. 環(huán)境

原生組件無法支持v-bind;用戶自定義組件以及第三方擴展組件才支持v-bind

1. uniapp
2. vite + vue3 + TypeScript + vite（移動端低代碼）
3. 編譯成多端通用的小程序

2. 需要分兩類解決

1. v-model屬性

• 在高版本的vue3+vite中使用父組件傳遞下來的props中的某一個屬性，作為當前組件的子組件的v-model入?yún)?，那么將會報錯
• [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.

• 正確姿勢

  1. 定義一個可讀可寫的computed

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

  2. 將computed直接拿去雙向綁定

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

  3. 完整代碼

  	// 父組件
  	 <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

解決方法

1. 父組件主動傳遞其他屬性attrs

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

2. 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>

覺得有用點個贊，讓更多的人看見文章來源地址http://www.zghlxwxcb.cn/news/detail-478679.html

到了這里，關于解決uniapp編譯的微信小程序不支持v-bind=“$attrs“的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！