Vue3组件（13）封装控件后属性的传递问题

如何管理属性

UI库的表单子组件有很多很多的属性，这个怎么处理？一个一个设置属性，然后一个个绑定上吗？
一开始还真是这么做的，后来发现很蠢，Vue已经提供了更便捷的方式。

Attribute 继承

内部根节点的组件，会自动继承外部设置的非props属性（Attribute），这样的话我们就不用一个一个的属性去设置了。

如果不是根组件的话怎么办？也很简单，可以使用v-bind="$attrs"一次性绑定上。

那么现在问题来了，什么样的属性需要我们定义成props，什么样的属性使用继承的方式呢？

定义的属性的规则

• 属性名称不一致的，这个肯定要转换一下；
• 代码里面需要访问的，设置成props便于获取；
• “重要”的属性，设置一下更醒目；
• 需要通过默认值做统一管理的，既可以通过默认值做统一处理，又可以传递属性做个别处理；
• 需要做验证的，有些属性是三选一（或者n选一），不能随意填，这时就需要在props里面做验证。

其他的通过继承直接传递进来就好。这样组件内部的代码就省事多了。

调用方式

父组件里面设置属性的时候，还是可以用一个大对象来做，需要哪些属性，设置给对象就可以。

空字符串的，和默认值一直的属性就不用设置了，这样我们的josn文件可以短很多。

剩下的就是辛苦活了，还是要统计一下UI库的组件到底提供了多少属性，一遍确定哪些属性放在props里面。

另外还需要做一个辅助的支撑平台，帮助我们生成json文件，否则岂不是给自己找罪受？

020表单子控件的属性.png

目前整理到了这种程度，基本上HTML5的原生属性可以设置到props里面，UI库的嘛，太多了，用继承的吧。