轮播图知识点

轮播图自实现知识点

• slot
  <slot></slot>插槽，用于在引用组件后插入html标签

          <slider>
            <div v-for="item in recommends" v-bind:key="item.id">
              <a :href="item.linkUrl">
                ![](item.picUrl)
              </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>