封装Vue组件的步骤

组件是什么？组件是一段功能代码 ---大白话 就是一段html +js +css 你可以重复使用

封装Vue组件的步骤,以轮播图为例
1 新建vue组件

<template>
  <div>
    <!-- 封装组件1 你把你要封装的代码 放到一个单独的vue组件里面
                2  可以在main.js Vue.component注册组件
                3 哪个组件要用 就直接 使用注册的组件标签名
       -->
    轮播图
    <!-- 封装组件：你就先写死你的代码  然后再考虑 封装问题
      你写了轮播图 那么 其他的就是搞样式 js换一下 比如显示隐藏等等

       写死之后 写完了  就该考虑 数据的问题了？
        1 图片 的数量 不是死的  谁用我的组件 就传数据进来 我循环就行
        2 定时器 时间 能固定2秒吗？也需要传
        3 意思就是 你考虑不能写死的 都传进来
        无缝 就是 最后一张图片和第一张是一样的
           你注意判断条件就行
       -->
    <div class="box">
      <!-- 内层盒子 每隔 2秒 往前滚动 -->
      <ul class="inner" :style="{ left: leftPostion + 'px' }">
        <li class="item" v-for="item in list" :key="item.id">
          <img :src="item.src" alt="" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  //  这个接受 父传来的数据 props  可以直接用
  props: {
    list: {
      type: Array, //类型
      // default:[] // 数组的默认值不能这样写
      // default:()=>{//数组默认值 要这样
      //    return []
      // }
      default: () => []
    }
  },
  // 这种写法 对象是 复杂类型 这样写 所有导入组件的 会引起冲突
  // 虽然大家 导入很多次组件  指向是一样的
  // data:{
  //   leftPostion:0
  // },
  // 这种函数写法 他每次 都是return 新对象 互相不影响
  data() {
    return {
      leftPostion: 0 // ul 往前移动的距离
    };
  },
  created() {
    // 经常created  发送ajax
    // 页面打开 每隔 2秒 我现在让ul  移动 在哪写？
    //涉及到ul 的dom元素了 所有 必须在mounted写
  },
  mounted() {
    // 这里 页面一定已经渲染元素了
    let i = 0;
    setInterval(() => {
      i++;
      if (i >= 4) {
        i = 0; //还原到头
      }
      // 修改 left的值
      this.leftPostion = -i * 300;
    }, 2000);
  }
};
</script>

<style>
.box {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  overflow: hidden;
}

.box .inner {
  width: 1200px;
  position: relative;
  transition: left 1s;
}

.box .inner li {
  float: left;
  width: 300px;
  height: 300px;
}

.box .inner li img {
  width: 100%;
  height: 100%;
}
</style>

2 Vue.component注册组件

import Swiper from './components/Swiper.vue'
Vue.component("my-swiper",Swiper)

3 在其他组件使用 标签名