vue3 uniapp如何实现组件属性透传？

很多时候我们需要对已有的UI组件库进行二次封装,这里以 uniapp原生框架为例，封input 组件类似如下：

<uni-easyinput v-model="formDataObj[item.key]"  ></uni-easyinput>

这个时候，我们需要保证外面能够直接设置 input 的属性，比如 placeholder、clearable 等等，最好能够透传

一.通过props直接设置

通过 props 传值进来，然后一个个的设置

<uni-easyinput  v-model="v-model="formDataObj[item.key]" " clearable 
				:placeholder="item.placeholder" :disabled="item.disabled">
			</uni-easyinput>

通过传入的props-item来设置placeholder和disabled

但是这种方式比较繁琐，当属性特别多的时候代码可读性差、维护不方便、而且还会有遗漏的点

二.通过 v-bind="$attrs" 

官方对 vm.$attrs 的定义：

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并

且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

意思就是调用一个组件的时候传入属性 (class 和 style 除外)，而且不在该组件内部的 props 中声明，就可以通过 v-bind="$attrs" 传入该组件的内部组件

那么我们不给input组件设置props：

<uni-easyinput  v-model="formDataObj[item.key]" v-bind="{ ...item.attrs }">
			</uni-easyinput>

在使用时设置attrs就能看到表单被禁用

{
	type: "input",
	label: "请输入",
	required: true,
	key: "visitor",
	attrs: {
		disabled: true
	},
},

三.通过v-on实现事件监听

如果props一样，当事件很多时不能一个个的去添加把，那么可以通过v-on实现

<uni-easyinput  v-model="formDataObj[item.key]"
				v-bind="{ ...item.attrs }"
				v-on="{ ...item.eventChange }">
			</uni-easyinput>

使用时通过eventChange来设置input事件

{
	type: "input",
	label: "请输入",
	required: true,
	key: "visitor",
	attrs: {
		disabled: true
	},
    eventChange: {
		input: {}
	}

},