vue项目跳坑总结

2020-08-30 本文已影响0人叶相依

Vue项目终于做完了，现在总结一下其中的奇奇怪怪的bug

1.图片路径问题：

如果只是展示一个一个的图片，那就在img内联src里写死路径，这样图片可以加载出来

但若是展示多个图片，如果你想用v-for循环动态绑定路径，图片的路径就会被cli重命名

所以解决方法是，直接导入图片，导入后在src里直接写入导入的文件名

2.图片循环问题

外面的item已经有一次循环图片的地址，图片里就不要再循环一次，否则就会把图片本身循环，出现一直重复一张图片的问题

这个是我用轮播图插件时遇到的问题，swiperItem里我放入了一个img，然后把img，v-for循环，但会出现只显示一张图片。最后发现Item已经是包裹图片的最小单位，放入图片就不要再遍历循环，而是把数据传给Item

3.element-ui样式不能修改问题：

去除style里的scoped，再重写样式

scoped是防止样式重置，html页面里没有，但vue-cli里会默认自带，如果要重置插件里类名的样式，需要把style里的scoped去掉再重写样式

4.grid-item>div>img,图片原大小不同，小的图片无法拉伸填充完整父div

解决方法：1.给父盒子设置绝对的宽高值 2.去掉多余的包裹层

这个至今不知道原理是什么，外面的是网格布局（grid),div盒子包裹每一个图片，盒子充满了网格（grid-item）但较小的图片却无法填充盒子。（无论用什么样式），更奇怪的是，最后发现样式仅最那个较大的图片有效，原来小的图片根本没有应用到样式。（css选择器是直接选img，没有进行任何分类）

5.better-srcoll插件，使用出错。请学长来看，没有解决。放弃

6.想抽离数据，detail里的照片导入有点多，代码有点乱，想在另一个js里抽出来，但export default 里不能import

7.非父子组件之间的通信事件总线：bus（本次纠错只是想把bus的问题解决，如果把数据放入veux里就不有错，但这次总结是为了改正错误和自身技术不足。不考虑避开使用bus的方法）

事件总线的使用：1.main.js文件里配置 Vue.prototype.$bus=new Vue();

发射：this.$but.$emit('自定义事件‘,参数);

接收：$this.$bus.$on('自定义事件',回调函数)

但第一次emit提交事件，on无法接收，查阅资料，原因是on监听还未创建就emit就已经发送

尝试方法1：把emit放入beforedestroy(销毁前钩子函数),把on放入beforecreate（创建前钩子函数）

结果：失败，原因：页面中已经加入keep-alive标签，不会销毁组件，无法触发emit的钩子函数

尝试方法2：调用$emit的时候使用emit的时候使用emit的时候使用 $nextTick()方法，且在跳转组件前$off销毁组件

结果：失败，原因：因为无报错，所以原因暂不明，只是无效

尝试方法3：在跳转的触发事件里，把数据暂存到这个组件的data里，调用deactivated消极函数调取本地数据用来传参。

11.直接由跳转路由的组件，（因为没有router-view,就没法加keep）怎么让刷新时，数据不重新请求

这是在跳转一个视图组件时遇到的问题，因为这个组件是直接在路径里push，所以刷新页面时会把请求来的数据（这个数据是放在其他组件里的），变没。解决方法：把数据放入vuex或端口异步请求过来。

12.数组通过索引修改的数据不会响应式刷新，对象临时新增的属性（对象.属性=val）不会响应式刷新

13.忘记vuex的state数据最好通过vuex里的方法修改，我都是在组件里的方法里直接修改state的数据了