Vue踩坑记录
一. 使用import导入外部js文件,调用方法undefined
错误写法
import { formatDate } from "@/common/js/date.js"; console.log(this.formatDate)
原因:this表示vue的实例,并没有这个方法,正确调用为不需要this
import { formatDate } from "@/common/js/date.js"; console.log(formatDate)
二. 使用v-html渲染的页面,css样式不生效
解决方法有2个:
1、scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.解决的话把scoped属性去掉就行了。
2、另外一种常用的方法利用vue的深度作用选择器。要为v-html渲染出中的标签添加CSS样式,我们需要在写样式的时候添加>>>就可以搞定了,如下:
.content >>> img{ width: 200px; }
如果使用方法2,是不能用less或者scss,需要使用css语法,否则会报错
3. 如果要使用less或者scss语法将>>>换成/deep/即可使用(vue3.0不可使用,vue3.0使用::v-deep效果都一样)
三. 当使用vue的v-for中的key值绑定,不能使用index进行key值绑定,会出错也不能起到vue的算法作用,key值要不使用index且要试用唯一id进行绑定
使用index进行key值绑定,出错示例,当删除for循环顶部元素:下面一个元素会复用第一个元素值,然后就出错了
删除后出错数据示例图,有些数据被复用了:
四. 使用vscode,vue进行开发,在使用 @
引入src
下某个目录下文件的时候,不出现路径智能提示;Ctrl+左键点击跳不能转打开到文件所在目录。
解决办法:项目根目录
下添加 jsconfig.json
文件,配置如下
{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_modules", "dist"] }
五. 实现父组件中每次点击按钮重新加载子组件,主要是解决我父组件要传给子组件的值在请求服务端后拿到,子组件又需要在created对父组件的传来的值进行处理。这时我只要更新父组件引用子组件上写的key值就能重新生成子组件触发子组件的created
key 属性是用来 给vue 元素渲染的时候用的,每次渲染的时候会去拿这个key 值做对比,如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素,否则保持上一次的元素状态。
当key变化后,created() 生命周期函数每次都会执行,重新生成dom 元素。
六. 使用axios上传文件,需要利用原生form表单对象
export const uploadFile = file => { const param = new FormData(); param.append("file", file.file); const config = { headers: { "Content-Type": "multipart/form-data" } }; axios.post("/upload", param, config).then(res => { console.log(res); }); };