Vue
文章平均质量分 50
兴趣使然的码仔
要打开真理之门就需要付出对等的代价
展开
-
Vue——组件间数据访问方式与通信方式的一点总结思考
目录常态数据访问方式props适用场景优点缺点Demo$attrs适用场景优点缺点Demoprovide/inject适用场景优缺点$refs适用场景优缺点$parent, $children适用场景优缺点vuex适用场景优缺点事件通信$emit适用场景优缺点$listener适用场景优缺点EventBus适用场景优缺点常态数据访问方式props将数据以变量参数形式传递给子组件中定义的props适用场景父组件将数据向子组件同步优点父组件数据变化会向下传递,子组件中的数据也会跟随变化复杂数据原创 2022-04-27 12:00:00 · 362 阅读 · 0 评论 -
请求正常执行但是js语法报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘code‘)
开发过程中发现前端请求正常执行,接口功能正常且正常返回数据,但是js仍然报语法错误Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘code‘)原因:自定义拦截器后导出方法时忘记把promise对象return出去如下:正确处理方式应该将promise对象requestreturn出去,调用方法的位置才会是异步执行,就不会提示语法错误了...原创 2022-04-24 16:39:42 · 23578 阅读 · 0 评论 -
Vue之依赖注入——provide/inject的使用
常规使用静态数据,非响应式父组件 provide: { name: 'zs', age: 65, gender: '男' }子组件 inject: ['name', 'age', 'gender'], created () { console.log(this.name) // => "zs" }响应式数据数据变化从上往下流动注意:注入数据为对象才能实现,当为Number,String,Boolean等基本类型时变化无法向下流动原创 2022-01-22 17:35:15 · 566 阅读 · 0 评论 -
Element——tooltip无效和自定义内容
tooltip无效使用中发现,当tooltip内部元素内容为空,导致dom元素的wdth或height为0时,无法捕捉到鼠标悬浮动作,所以会失效使用注意tooltip中需要有html元素如果希望始终有tooltip内容,要给内部html元素设置默认宽高,使其可以被鼠标hover动作捕捉自定义内容使用v-html和函数协作<el-tooltip effect="dark" placement="right"> <div slot="content" v-h原创 2021-12-14 10:22:04 · 3869 阅读 · 0 评论 -
Element——给el-table表头添加*
文档配置使用<el-table-column :render-header="addRedStar"></el-table-column>addRedStar(h, { column }) { return [ h("span", { style: "color: red" }, "*"), h("span", " " + column.label), ]; },原创 2021-12-13 17:56:20 · 975 阅读 · 0 评论 -
Vue——插槽语法
报错Unexpected mixed usage of different slot syntaxesv-slot和slot-scope新旧插槽语法混用时出现的错误旧语法声明插槽<slot name="demo" :props="data"></slot>使用插槽<template slot="demo" slot-scope="props"></template>新语法声明插槽同上使用插槽<template v-slot:d原创 2021-12-13 16:48:46 · 574 阅读 · 0 评论 -
Element——el-table设置单元格间距
场景需要给el-table的单元格设置间距,但是发现gei单元格添加margin无效解决方法使用css中表格专用属性border-collapse和border-spacing这两个属性控制“规定是否合并表格边框”以及“ 规定相邻单元格边框之间的距离”.cell-space /deep/ .el-table .el-table__body-wrapper .el-table__body { border-collapse: separate; border-spacing: 5px;}原创 2021-12-13 15:28:01 · 8752 阅读 · 0 评论 -
Vue——$attrs和$listeners
$attrsVue2官方文档的解释如下:作用简单来说就是 组件向下传递数据 的,是props通信的补充方案,避免了组件中props过多的窘境。使用祖父组件GrandPa如下:传给Parent组件的数据有name,age, gender<template> <div> 我是祖父: 下面是爸爸 <Parent v-bind="$attrs" :name="'佩奇爸爸'" :age="age" :sex="sex" />原创 2021-12-10 14:28:32 · 537 阅读 · 0 评论 -
Vue——子组件中引入父组件
场景因为特殊情况,开发中子组件又需要引入父组件,即子组件中再创建一个父组件的Vue实例。比如一个展示组件Rack,内部有一个子组件RackDialog,然后RackDialog里又需要引入Rack组件问题使用常用的组件引入注册方式在RackDialog组件中引入Rackimport Rack from "Rack.vue"export default { components: { Rack }}上面的方式运行时会报错组件未注册解决方案使用异步组件引入方式,即在RackDia原创 2021-12-07 17:31:14 · 1439 阅读 · 3 评论 -
/deep/和 >>>以及 ::v-deep 三者的区别
>>>深度作用选择器的简写形式只作用于css,不支持css预加载器(less/scss)是/deep/的简写形式,适用于Vue2.x版本,Vue3.x版本使用会报错/deep/Vue2.x的深度作用选择器正式写法仅适用于Vue2.x版本支持css预加载器::v-deepVue3.x的深度作用选择器正式写法...转载 2021-12-07 17:00:49 · 1250 阅读 · 0 评论 -
Element——el-table单元格无法设置外边距,只能通过border-width实现间隔效果
场景开发中有需求使用el-table实现如下展示效果:问题内部使用的el-table实现效果,但是设置单元格自检的灰色间距时发现cell-style中设置margin没有效果解决方案通过设置border-width,加大边框宽度实现间距效果优化使用v-for双循环和div自定义效果是最简单的实现方法,同时样式的把控和事件的处理也比较容易,el-table对数据格式有要求,且事件处理,样式分场景覆写都会有压力,...原创 2021-12-07 16:38:50 · 2509 阅读 · 0 评论 -
使用ElementUI开发的情况下,多使用Layout布局
行/列<el-row></el-row><el-col></el-col>行属性ex:<el-row :gutter="20" type="flex" justify="center" align="center"></el-row>列属性ex:<el-col :span="24"></el-col>栅格布局<template> <el-container>原创 2021-12-07 15:49:40 · 1100 阅读 · 0 评论 -
Element——el-table给所有的row和column数据加上索引
问题场景开发中发现el-table在使用cell-style时无法获取row,column的索引信息解决思路在其他可以获取到行列索引的方法中对行列数据添加索引属性解决方法利用el-table的cell-class-name配置,以及数据浅拷贝的特性<el-table :data="tableData" :cell-class-name="tableCellClassName"></el-table>export default { methods: { table原创 2021-12-06 17:11:57 · 2756 阅读 · 0 评论 -
(超简单)使用vuepress搭建自己的博客并部署到github pages上
本地新建博客项目根目录全局安装vuepressnpm install -g vuepress在MyBlogs下初始化项目npm init -y按照如下结构创建目录与文件MyBlogs├─── docs│ ├── README.md│ └── .vuepress│ ├── public│ └── config.js└── package.json配置@/docs/.vuepress/config.js文件module.exports = {原创 2021-09-06 11:14:53 · 258 阅读 · 0 评论 -
Element——el-input自动聚焦
问题描述开发过程中有如下用户体验优化需求:可编辑文本最开始以文本形式展示点击文本后切换输入控件输入控件显示后自动聚焦,开始输入输入完成,输入控件失去焦点时自动隐藏并切换会文本显示遇到的坑思路就是通过点击事件进行显隐的切换,并是输入框获取焦点。于是有如下代码:<template> <div @dblclick="ondbclick"> <div v-show="!isEdit"></div> <div v-show="isEd转载 2021-09-03 14:53:24 · 6312 阅读 · 2 评论 -
Element——Module parse failed: Unexpected character ‘‘ (1:4)-Element UI安装报错
问题与现象在项目安装element-ui后在main.js引入包并引入样式文件,如下:随后执行npm run dev运行项目时报错,如下:原因该项目为vue组件封装项目,使用了webpack-simple模板,所有有webpack的分包操作,但是webpack的loader配置中并没有可以对woff文件进行分包的加载器,所以有如上报错解决方法在webpack.config.js文件中加入对应的加载器处理配置项即可:结果element-ui的样式正常加载...原创 2021-09-01 19:52:54 · 1542 阅读 · 0 评论 -
vue组件进行npm打包时生成的目录结构问题
问题开发过程中发现,自己打包出来的组件目录把App.vue,等文件全都打包进去了,如下但是实际使用其实只需要编译生成的dist目录即可,干净清爽的包应该是如下的结构原因在打包时,package.json文件中没有设置files项,默认将整个项目目录作为打包目标了。解决方法如下配置即可,将需要添加打包的目录个文件写入数组,package.json和readme文档是默认加入的。...原创 2021-09-01 19:01:04 · 1121 阅读 · 0 评论 -
自己封装的vue组件在新项目中使用时无法通过包名引入
问题组件封装上传到npm后,在新项目下载依赖,只能如下使用绝对路径引入使用无法像element-ui一样简单的使用包名引入原因在组件打包的时候webpack配置有问题,没有配置output下的library项。在新项目中使用时必须用该项设置的包名才能便捷引入package.json文件中没有设置main参数,main没有设置的话打包时就没有设置入口的js文件,就无法用包名引入使用结果上面两项设置后,就可以使用包名引入了...原创 2021-09-01 18:33:54 · 653 阅读 · 0 评论 -
基于Element UI封装vue组件并发布到npm上使用(lib模式)
留坑等补原创 2021-08-31 18:31:36 · 1148 阅读 · 6 评论 -
修改webpack配置使项目运行自动打开浏览器
在vue/cli脚手架生成的项目模板下,通常是将vue.config.js文件隐藏,不暴露出来的,可以自己手动创建,如下:在节点下添加open: true // 控制是否自动打开浏览器然后运行 npm run build 或 npm run serve 即可,项目编译完成就会自动打开浏览器...原创 2021-08-31 11:29:48 · 1792 阅读 · 0 评论 -
关于SCSS中使用深度选择器
最近 开发过程中遇到一个问题,当对element-ui的样式进行覆写时,由于样式优先级关系导致自己写的样式"padding: 0"无法覆盖element的组件样式。在SCSS中使用::v-deep的话虽然样式覆写可以成功,但是该类内部的字标签类样式会失效。.class1{ ::v-deep .class2{ p{} }}如上,class2的 样式可以覆写,但是内部的p标签选择器的样式会失效。解决方案是可以把class2的覆写单独提炼出来再加上深度选择器。.class1{ .class2原创 2021-07-27 16:39:26 · 7004 阅读 · 0 评论 -
Vue——对象的变化侦测原理
Object.defineProperty()首先需要知道的是Object.defineProperty()方法。JS官方文档中对此方法的解释如下:Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象备注:应当直接在Object构造器对象上调用此方法,而不是在任意一个Object类型的实例上调用。语法:Object.defineProperty(obj, prop, descriptor)从文档...原创 2021-02-23 23:30:33 · 245 阅读 · 0 评论 -
Vue报错:“Duplicate keys detected:‘***‘.This may cause an update error”
vue开发过程中遇到如题报错,意思是检测到重复key,可能导致更新错误。错误原因:使用v-for时通常标准化的需要一个唯一的key值。当使用了两个循环,且循环遍历的是同一个数组/对象时,key同时也一样就会报这个错误。因为vue的数据是双向绑定的,所以数据更新会引起视图的更新,而对于要使用v-for循环的结构体,key是用于区分每个item更新的关键,所以当key重复的时候科能导致一条数据更新的同时让两个key重复的不同元素同时更新,或者以key为唯一标识的item无法准确识别需要更新的对象,因此v原创 2020-10-15 08:34:19 · 25097 阅读 · 0 评论 -
使用VSCode创建Vue项目(Vue cli 2.x版本)
本文主要为转载,中间有添加个人内容基本概念vscodeVisual Studio Code(简称VS Code/VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac以及Linux。微软与github合作推出的在线代码编辑器也是也vscode作为底座开发的,未来github有这大力推广在线...转载 2020-10-09 20:54:08 · 1279 阅读 · 0 评论