VUE3----- 组件封装

VUE3----- 组件封装

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：在不使用组件库时，需要封装一些自定义的组件。像功能组件和样式组件之类的..........

---

一、骨架屏组件

一个纯UI组件 提供数据返回之前的占位，把 width/height/background 设计成props

小坑:  当props作为样式使用的时候需要注意传入的数据必须是合法的css值
优化:  暴露给用户的是number类型 在内部做拼接处理

二、轮播图组件

1.核心逻辑:

  1. 图片和操作按钮必定是一一对应的关系 由同一个数组进行遍历产出
  2. 下标值必定是 一 一 对应的（index）
		点击按钮的时候 记录一下当前点击的下标值 然后通过下标值 和图片的index做匹配，控制图片的显示  

2.封装思路:

1. 基础的静态结构
 2. 实现按钮点击的交互效果
 3. 找到那些可能会根据用户传入的地方
 4. 把需要自定义的地方设计成props

3. 小坑:

 1. 注意index值最大范围
 2. 及时清除定时器

三、面板组件

功能: 提供一个通用的结构架子  支持自定义内容的传入

思路: 1. 纯文本的自定义部分 设计为props
     2. 比较复杂的自定义模板 设计为插槽（具名+匿名）

四、面包屑组件

1.封装思路

当要实现的一个功能很庞大 它是由多个小的独立的功能聚合起来 然后我们通过使用拆分小组件对应小功能

2. 技术实现

• Bread: 支持分隔符传入 如果传入就以传入的为主
• BreadItem: 支持用户自定义name 支持to属性传入完成导航跳转
• provide/inject 完成在Item中使用Bread里的数据
• slot 支持自定义模板

代码块

//父组件，需要注册为全局组件，在index文件中注册
<template>
  <div class="bread">
    <slot />
  </div>
</template>

<script>
import { provide } from 'vue'
export default {
  name: 'Bread',
  props: {
    separator: {
      type: String
    }
  },
  setup (props) {
    // 把分隔符传给所有的底层组件
    provide('separator', props.separator)
  }
}
</script>

<style  lang='less'>
.bread {
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      color: #666;
      transition: all 0.4s;
      &:hover {
        color: @xtxColor;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
  .bread-item {
    // 最后一个i隐藏
    &:nth-last-of-type(1) {
      i {
        display: none;
      }
    }
  }
}
</style>

------------------分割线--------------------

//子组件
<template>
  <div class="bread-item">
    <!-- 支持用户自定义文本内容的插槽 -->
    <!-- to 存在 router-link  不存在 span -->
    <template v-if="to">
      <router-link :to="to"><slot/></router-link>
    </template>
    <template v-else>
      <span><slot /></span>
    </template>
    <!-- 分割符 逻辑渲染 -->
    <template v-if="separator">
      <i>{{separator}}</i>
    </template>
    <template v-else>
      <i class="iconfont icon-angle-right"></i>
    </template>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'BreadItem',
  props: {
    to: {
      type: String
    }
  },
  setup () {
    const separator = inject('separator')
    return {
      separator
    }
  }
}
</script>

五、更多组件

例如：导航组件

功能: 根据传入的path路径提供路由跳转功能
思考: 如何让组件既支持内部路由跳转又支持三方url跳转(https://baidu.com)