【Vue学习笔记】（1）问题及解决方法记录

1、父组件传递 props 到子组件过程中，报错或者没有值。

参考链接：http://www.jb51.net/article/117447.htm

2、vue工程项目中style设置background-image路径问题：

使用

<li v-for="img in imgs" :key="img.id" class="" :style="'background-image:url('+  img +')'"></li>
imgs:[
      require('./../assets/banner_top2.png'),
      require('./../assets/banner_top3.png'),
      require('./../assets/banner_top4.png')
    ]

 

3、刷新页面，vuex中全局变量state不能保存原有的数据，需要在给vuex中state赋值的同时，通过localStorage存储来代替。因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

4、router-link中如果绑定了跳转路径:to,就不能添加click事件，不会执行。

- 解决办法：不用router-link直接使用a标签+@click事件，并在点击事件中添加this.$router.push来进行路由的跳转

5、子页面需要绑定后台数据到视图，获取数据函数传入参数需要从父级页面得到时。

- 解决方法：在父页面获取到数据后，保存在vuex中，在子页面的computed中获取得到数据即可。（页面刷新问题可看4）

6、父组件传递props异步数据到子组件，先获取数据，再加载子组件，用v-if绑定子组件，初始设置为false，然后再mounted钩子函数最后将值改为true，加载子组件。或者使用watch监听子组件加载。

7、子组件中用Echarts画图，图表数据从后台获取：

- 用上述方法，即使在父页面提前获取数据，仍然报错；仍然无法保证页面绘制图表时，数据已经获取到；

- 解决措施：在mounted钩子函数中获取数据，然后将图表绘制步骤放置到$http.get()方法的回调函数中，在正确获取到数据后再进行图表绘制，在computed中返回对应参数；

8、在@click事件中有个默认参数but（$event,this）,可以获取当前点击元素进行修改。

 

event.target.style.backgroundColor = 'red'.

 

9、页面刷新，vuex保存的数据消失的问题，除了将上级传入数据放到localStorage，或者用props传递参数。

10、 一般项目中，一个相对独立的模块如果引入vue用的话，

- 如果是单独的一个router-cli建立的工程，除了用url引入。

- 如果是直接在项目中嵌入，就在模块入口用新建vue实例，CDN方法引入vue。

11、 一个vue项目，vuex进行模块化管理，即除了根 store 以外，还通过 module 将各组件的 store 分开管理。或者每一个组件建立新的vuex文件存储。

 

12、页面刷新，若模板更新过多，出现很强烈的过度效果，可能是使用v-if的原因，可以用v-show代替。

 

转载于:https://www.cnblogs.com/qiuyueding/p/8656376.html