【Vue3】首页主体-封装查看更多组件

首页主体-查看更多组件

封装一个通用的查看更多组件

功能：

1. 可以配置跳转路径
2. 可以动态传入展示的文字

（1）创建组件src/components/more/index.vue

<script lang="ts" setup name="More">
import {
    
     defineProps } from 'vue'
defineProps({
    
    
  path: {
    
    
    type: String,
    default: '/',
  },
})
</script>
<template>
  <RouterLink :to="path" class="more">
    <span><slot>查看全部</slot></span>
    <i class="iconfont icon-angle-right"></i>
  </RouterLink>
</template>

<style scoped lang="less">
.more {
    
    
  margin-bottom: 2px;
  span {
    
    
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
    color: #999;
  }
  i {
    
    
    font-size: 14px;
    vertical-align: middle;
    position: relative;
    top: 2px;
    color: #ccc;
  }
  &:hover {
    
    
    span,
    i {
    
    
      color: @dsColor;
    }
  }
}
</style>

（2）全局注册src/components/index.ts

import type {
    
     App } from 'vue'
import Skelecton from './skeleton/index.vue'
import Carousel from './carousel/index.vue'
import More from './more/index.vue'
export default {
    
    
  install(app: App) {
    
    
    app.component('Skelecton', Skelecton)
    app.component('Carousel', Carousel)
    app.component('More', More)
  },
}

（3）定义全局组件类型global.d.ts

import Skeleton from '@/components/skeleton/index.vue'
import Carousel from '@/components/carousel/index.vue'
import More from '@/components/more/index.vue'
declare module 'vue' {
    
    
  export interface GlobalComponents {
    
    
    Skeleton: typeof Skeleton
    Carousel: typeof Carousel
    More: typeof More
  }
}
export {
    
    }

（4）查看效果

<More>查看更多</More>

小技巧

1. 子组件如果只有一个根标签，父组件传递过去的数据会能够穿透
2. 如果子组件通过defineProps定义的数据不会出现在标签的身上