Vue3组件(19)如何优雅的给组件设置属性

简介: 如何优雅的给组件设置属性

属性,多乎哉不多也。



原生HTML5提供了一些属性,然后UI库又在此基础上扩展了好多属性,所以与其说学习UI库,倒不如说是学习这些属性都是啥意思。


当然平时在使用的时候还是挺轻松的,


需要的属性就好,其他的用到的时候再去看就好。


于是我们一般会按照官网的例子写属性值,比如这样:


<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
复制代码


但是感觉哪里不对的样子。


v-bind="{}" 要不要用?



既然Vue提供了这么方便的绑定方式,我们弃之不用是不是有点可惜了呢?


于是我这么绑定属性


<el-input v-model="model.text" v-bind="metaText">
复制代码


const metaText = reactive({
    controlId: 101,
    colName: 'name',
    controlType: 101,
    defaultValue: '1',
    readonly: false,
    disabled: false,
    placeholder: '请输入姓名',
    title: '姓名',
    maxlength: 6,
    minlength: 2,
    autofocus: true,
    'suffix-icon': 'el-icon-date'
  })
复制代码


这样是不是更优雅了一些呢?这些属性当然不用全写,而是需要哪个就写哪个,不需要的划掉就好。


这样集中管理属性,一次性统一绑定,以后增减属性的话,不用改模板了,只需要改这个对象就好。


而且,这个可以转换成 json 的格式,也就是说可以方便的用 require 加载,或者用 axios 加载。


require 方便好用,但是打包的时候会把 json 文件也加进来。 而用axios加载的话,意味着可以热更新,同时打包的体积也可以小很多。


看着挺好,但是实际上却……


如果你觉得上面的方法确实挺好的话,说明你没有实践过,如果真的用过就会觉得,完全不是这么回事,还不如直接写属性来的方便。


那么差在哪里呢?—— 差在了缺少一个辅助工具。


写个小工具生成属性的数据


这几天都在做这个小工具,弄的有点头大,因为属性实在太多了。


image.png


后来发现自己的方向搞错了,这么弄会s人的。


于是换了一下思路,把属性分成两大类:


  • 一个是基础属性,基于HTML5原生属性;


  • 一个是扩展属性,就是UI库提供的属性。


这样可以先把基础属性搞起来,然后在慢慢弄扩展属性。


于是做成了这个样子:


image.png


或者这样:


image.png


(看着是不是有点眼熟)


左面设置属性,右面立即渲染dom,下面是生成的属性对象,有js版和json版。


这样是不是很方便了呢?


这还只是第一步,因为这只是一个控件,那么一个表单里面有多少个这样的控件呢?


如果能够集中设置成一个大的json的话,是不是更方便了呢?


还有UI库的扩展属性,数据验证功能等。


大概还要好几天才能弄好。


源码



github.com/naturefwvue…


相关文章
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
15天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
35 7
|
16天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
38 3
|
15天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
36 1
|
15天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
36 1
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
5天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。