vue3封装组件预留默认插槽，当插槽中有内容时显示插槽内容，没有时显示某个属性内容

vue3封装组件预留默认插槽，当插槽中有内容时显示插槽内容，没有时显示某个属性内容

就比如当我封装一个trend组件，给他设置一个text属性，当text有值时显示text内容：

当预留插槽有值时优先显示插槽内容：

红色框时预留插槽内容（默认插槽default）显示如下

这应该如何实现呢？

直接看代码吧

trend组件：

<template>
  <div class="trend">
    <div class="text" :style="{ color: textColor }">
      <slot v-if="slots.default"></slot>
      <div v-else>{{ text }}</div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { useSlots } from 'vue'
let props = defineProps({
  // 文字内容
  text: {
    type: String,
    default: '文字'
  },

})
// 获取插槽内容
let slots = useSlots()
console.log(slots)
</script>

<style lang='scss' scoped>
.trend {
  display: flex;
  align-items: center;
  .text {
    font-size: 12px;
    margin-right: 4px;
  }
  .icon {
    svg {
      width: 0.8em;
      height: 0.8em;
    }
  }
}
</style>

这样就可以了啦，其实很简单啦，vue3为我们提供了useSlots方法，当我们给预留的插槽传有内容时，useSlots方法会返回当前内容。比如本例中可以打印看一下

console.log(slots)的内容如下：

当我们不传值时打印内容如下：

所以我们可以根据slots.default是否有值来判断是否给插槽传值了