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…


相关文章
|
9天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
6天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
19 7
|
7天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
27 3
|
6天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
24 1
|
6天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
25 1
|
9天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
9天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
9天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
12天前
|
JavaScript Java API
vue3知识点:setup
vue3知识点:setup
26 5
|
12天前
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
21 5