标签：初始化 AB 遇到 复用 问题 swiper 组件 类名

在父组件复用了一个swiper组件，总共复用了四次
ABCD分别代表复用组件的功能模块
AB组件在页面初始化时，立即请求数据，状态为display:block，CD这两个组件状态是none，并且只有在分别点击它们的时候才会请求数据
在swiper组件中使用watch监视父组件传过来的数据，
如果数据发生改变，使用$nextTick函数，初始化swiper（传入类名），本以外只会初始化前两个AB复用组件的Swiper
但是通过断点发现，直接传入类名初始化时，总共初始化了四个Swiper(输出this可以看到 四个数组，每个数组的内容是初始化时传入的类名)，也就是说除了初始化了AB组件，还把状态为none的CD组件也初始化了。

后来在滑动的时候 出现了各种问题，比如: 无限滑动 、初始化时显示最后一个silde、 滑到最后一个slide的时候，又自动弹回第一个slide了。
后来通过swiper官方api: Observer监视器解决了问题，这个api的功能是当 silde 发生变化时，重新初始化swiper。

最终解决方法: 不要直接传入类名，而是把ref引用的DOM元素传进去。这样在初始化时，只会初始化AB组件，并且输出this，也只有当前一个Swiper，把当初swiper api: Observer配置删除掉，滑动也是没任何问题的。

还有就是在获取DOM修改状态的时候，也是必须要把ref引用传进去，不然获取的时候，还是会包括隐藏元素的，到时候如果需要遍历DOM，同样会把这些隐藏元素也遍历一遍。

标签：初始化,AB,遇到,复用,问题,swiper,组件,类名
来源： https://www.cnblogs.com/freedomweb/p/14843170.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。