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{
     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);
  });
};