vue
文章平均质量分 51
无心使然云中漫步
这个作者很懒,什么都没留下…
展开
-
vue prop改变,子组件更新和重新渲染
对于场景2,当在父组件中,改变传递给子组件的参数,子组件的props会跟着改变,但是mounted生命周期函数不会再次调用,所以不会发送请求,子组件显示的依然是老数据。如果子组件中的数据只有部分是请求接口返回的数据,可以选择重新渲染子组件,也可以更新子组件中部分数据。对于场景1,当在父组件中,改变传递给子组件的参数,子组件的props会跟着改变,所以子组件会更新。2.1 给子组件加ref,父组件通过ref调用子组件中的请求后端数据的方法。如果子组件中的数据仅仅是请求接口返回的数据,可以选择重新渲染子组件。原创 2024-05-20 12:56:55 · 254 阅读 · 0 评论 -
vue3 defineModel
因此,在Child组件中,需要定义一个名为modelValue的prop,如果需要修改modelValue,需要定义一个名为update:modelValue的emit,并且调用。vue3.4直接使用。原创 2024-01-15 23:44:59 · 819 阅读 · 0 评论 -
element plus el-form双列布局及拓展任意布局
布局和数据分离灵活扩展layout2.1 可以建立多个layout文件,批量引入(或动态引入)Form.vue中 ,Form.vue中利用动态组件component加载各个layout文件2.2 可以建立多个layout文件,批量引入(或动态引入)LayoutIndex.vue文件中,LayoutIndex.vue文件利用动态组件component加载各个layout文件,然后Form.vue中只渲染LayoutIndex,同时通过传参决定渲染那个layout。原创 2024-01-10 21:32:33 · 2753 阅读 · 0 评论 -
vue3 useAttrs的使用场景,提取共有props
多个类似组件都需要传参data,用于请求接口或者处理数据,想让组件干净整洁,把参数data提出来。当在组件中引用hook后,控制台会警告,同时组件无法渲染。可以使用mixin混入或者extends继承(略)原创 2024-01-09 20:41:46 · 694 阅读 · 0 评论 -
vue3 element plus el-table封装(三)
上文是对el-table的基本封装上增加slot插槽,并且对col插槽进行拓展,本文主要时增加分页组件,同时进行slot传递。//CustomTable.vue增加空表格插槽,分页组件,slot传递,必要时可以扩展多个CustomTable组件。如果分页组件使用默认值,绑定true即可,如果需要自定义,绑定对象。//BaseTable.vue没有变。原创 2024-01-02 22:31:16 · 816 阅读 · 0 评论 -
vue3 element plus el-table封装(二)
本文是对el-table的基本封装,很常规的操作,主要是对列的封装,可以根据列配置数组进行渲染,后续会追加分页,列分类格式化等扩展封装原创 2023-12-31 23:55:41 · 1348 阅读 · 0 评论 -
vue3 element plus el-table封装(一)
本文是对el-table的基本封装,很常规的操作,主要是对列的封装,可以根据列配置数组进行渲染,后续会追加分页,列分类格式化等扩展封装//BaseTable.vue//index.vue方式二(自定义## Attributes继承)//BaseTable.vue//index.vue原创 2023-12-30 23:59:38 · 859 阅读 · 0 评论 -
vue3 element plus 自定义组件封装,多层双向绑定v-model
第一种无需多说,第二种简单示例,以Dialog组件示例。:绑定属性,@绑定事件,事件中修改属性。原创 2023-12-28 23:12:09 · 1530 阅读 · 0 评论 -
vue场景 无分页列表条件过滤,子组件多选来自父组件的列表
日常开发中,经常会遇到下面场景:页面加载一个无分页列表,同时工具栏设置多个条件可对列表过滤的场景(典型的就是关键字模糊查询)父组件传给子组件列表,子组件中需要多选列表多选,选择结果返回父组件原创 2023-12-24 21:10:34 · 797 阅读 · 0 评论 -
vue element plus 管理系统路由菜单简要设计(后端获取菜单)
管理系统“菜单”由后端接口返回,前端需要根据后端返回的“菜单”数组,构造路由,渲染侧栏菜单有些菜单是子菜单,有对应的路由,但是不在侧栏显示(比如一些详情页面)原创 2023-12-21 23:19:16 · 2976 阅读 · 0 评论 -
element plus el-scrollbar嵌套,自定义命中滚动条
布局为头部区域(淡蓝色),侧边栏区域(淡粉色),内容区域(淡绿色),其中内容区域上部(黑线以上)为面包屑区域 需求:1.内容区域可以整体纵向滚动 2.内容区域下部(黑线以下)可以滚动。后台管理系统,经典布局,固定头部。原创 2023-12-21 00:01:22 · 920 阅读 · 0 评论 -
vue 流光边框矩形圆形容器
实现流光边框一般是用渐变背景加动画实现,然后使用内部盒子遮挡内部空间,达到边框流光的效果思路:背景渐变+旋转动画。原创 2023-12-19 19:54:34 · 1097 阅读 · 1 评论 -
vue 斑马线进度条,渐变进度条
vue 斑马线进度条,渐变进度条。功能:自定义渐变(是否渐变,渐变颜色)自定义斑马线(角度,宽度)自定义百分比位置以及前缀文字、后缀文字自定义动画时间原创 2023-12-18 19:29:24 · 870 阅读 · 0 评论 -
element plus 表格el-table行多选单选
添加一个 el-table-column,设 type 属性为 selection 即可。原创 2023-12-17 23:59:21 · 1499 阅读 · 1 评论 -
vue引用public文件夹中文件
可以看到,虽然有警告,但是/public中的js文件,在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的,但是js文件内容已经被引入到当前js中了,test.js也不会影响。可以看到,虽然有警告,但是/public中的js文件,在vue组件中用import { test } from '/public/test.js' 方式引入后还是可以使用的,但是js文件内容已经被引入到当前js中了,test.js也不会影响。原创 2023-12-13 23:05:44 · 5218 阅读 · 1 评论 -
vue3 弧形菜单构思设计
因为曲线扁平,所以下面style中用每一项文字旋转和右边距仅仅进行了视觉上拟合,并没有进行严谨的拟合,参数可以自行修改。原创 2023-12-12 22:53:15 · 772 阅读 · 0 评论 -
vue中为什么需要手动移除事件监听器,DOM 事件监听器
一般情况下,一个组件被销毁或者卸载后,监听器也会被停止,而不需要我们手动去关闭监听器。但是总是有一些特殊情况,即使组件卸载了,但是监听器依然存在,这个时候其实式需要手动关闭它的,否则容易造成内存泄漏。上段代码中采用异步的方式创建了一个监听器,这个时候监听器没有与当前组件绑定,所以即使组件销毁了,监听器依然存在,当组件销毁时,监听器会继续引用该组件,防止其被垃圾回收。从vue2的生命周期知道,destroyed钩子,实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,原创 2023-12-10 23:38:38 · 875 阅读 · 1 评论 -
vue 动态引入组件、批量引入组件(vue2,vue3)
批量导入组件,在模板中利用动态组件component,根据key值渲染组件,注意这里的key类似‘’这样的形式,如果需要去掉路径可以用函数处理再放入componentList。原创 2023-12-10 23:30:27 · 2044 阅读 · 1 评论 -
vue3源码解析(v3.3.8)
从最基本的目录结构开始,逐渐深入,主要是为留痕,以便以后查阅。原创 2023-12-06 22:52:56 · 879 阅读 · 1 评论 -
vue2和vue3获取当前组件对应的DOM元素,获取当前组件的refs,v-for循环中绑定ref
Vue3.x中的核心方法:getCurrentInstance,用于获取当前组件的实例、上下文来操作router和vuex等。ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;原创 2023-12-07 23:52:04 · 1255 阅读 · 0 评论 -
封装Echarts Hook
vue3: 一般是封装hook,在每一个echarts组件中调用。原创 2023-12-09 13:35:37 · 628 阅读 · 0 评论