轮播图自实现知识点
- slot
<slot></slot>插槽，用于在引用组件后插入html标签<slider> <div v-for="item in recommends" v-bind:key="item.id"> <a :href="item.linkUrl">  </a> </div> </slider> -
v-for
现版本的vue在采用循环时必须要绑定key标签
<div v-for="item in recommends" v-bind:key="item.id">
- 加载图片时一个异步过程，所以在引入slider时要先判断数据时候有长度
<div v-if="recommends.length" class="slider-wrapper">
- 计算宽度
本轮播图采用的第三方组件时better-scroll,同时采用的方式时循环轮播，所以在计算总宽度时要另加两个元素（用于循环轮播的空元素）宽度 - ref标签
管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如：
<div class="slider-group" ref="sliderGroup">
<slot>
</slot>
</div>
这时我们就可以通过js代码来获取该组件this.$refs.sliderGroup
注意当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件
- keep-alive 标签
可以将包裹着的dom缓存到内存中，防止多次重新渲染
<keep-alive>
<router-view></router-view>
</keep-alive>
