简单留插槽的方法
在封装组件的时候，很多组件里面的一些内容是不能完全写死的，所以需要留出插槽好让组件使用者自己定义展示形式，下面是很详细的组件留插槽的方法(用的Nuxt框架和TailWindCSS)
我在写项目的时候遇到了一个描述信息的组件，我把他命名为Description组件，这个组件的内容是这样的
<template><div class="w-full flex flex-col text-[#00303e]"><!-- 标题 --><div class="text-[2.5rem] mb-[1.5rem] text-[bold]">{{ props.title }}</div><!-- 描述信息 --><div><div class="text-[1.25rem] mb-[1.25rem] mt-[3rem] flex flex-col" v-for="item, index in props.descriptions":key="index"><div class="font-bold" v-if="item.title && item.title != ``">{{ item.title }}</div><div><span>{{ item.content }}</span><span class="font-bold">{{ item.stress }}</span></div><!-- 更多消息按钮 --><div v-if="item.path && item.path != ''" class="mt-[2rem]"><NuxtLink :to="item.path" class="cursor-pointer"><UButton class="pt-[16px] pb-[16px] pl-[20px] pr-[20px] text-[1.125rem]" color="neutral"variant="outline" :square="false">{{ item.button }}</UButton></NuxtLink></div></div></div></div>
</template>
<script setup>
const props = defineProps({title: {type: String,defalut: () => ``},descriptions: {type: Array,defalut: () => []}
})
</script>
<style scoped></style>但是后来使用的时候发现内容部分有很多种形式，所以我想到给内容部分留一个插槽出来，可以让组件使用者自己选择内容部分是使用原来的默认展示还是用插槽自己定义展示方式，我在组件里面给添加了一个插槽：<slot name="descriptions"></slot>
<template><div class="w-full flex flex-col text-[#00303e]"><!-- 标题 --><div class="text-[2.5rem] mb-[1.5rem] text-[bold]">{{ props.title }}</div><!-- 描述信息 --><!-- 自定义的描述信息部分 --><div v-if="$slots.descriptions"><slot name="descriptions"></slot> <!-- 插槽：可以选择自定义描述信息 --></div><div v-else><div class="text-[1.25rem] mb-[1.25rem] mt-[3rem] flex flex-col" v-for="item, index in props.descriptions":key="index"><div class="font-bold" v-if="item.title && item.title != ``">{{ item.title }}</div><div><span>{{ item.content }}</span><span class="font-bold">{{ item.stress }}</span></div><!-- 更多消息按钮 --><div v-if="item.path && item.path != ''" class="mt-[2rem]"><NuxtLink :to="item.path" class="cursor-pointer"><UButton class="pt-[16px] pb-[16px] pl-[20px] pr-[20px] text-[1.125rem]" color="neutral"variant="outline" :square="false">{{ item.button }}</UButton></NuxtLink></div></div></div></div>
</template>
<script setup>
const props = defineProps({title: {type: String,defalut: () => ``},descriptions: {type: Array,defalut: () => []}
})
</script>
<style scoped></style>在外部使用这个组件的话，应该这么写：<template v-slot:descriptions></template>，注意这个descriptions一定要与组件里面定义的插槽名字一样才行
<!-- 这是不使用插槽的方式，内容部分按默认展示 -->
<Description :descriptions="aboutDescription" :title="`加强信息安全`"></Description><!-- 这是使用插槽的方式，内容部分就是自己在插槽里面自定义的展示方式 -->
<Description :title="`加强信息安全`"><!-- 注意这个插槽的名字一定要与组件里面插槽的名字一致 --><template v-slot:descriptions><div class="flex flex-col text-[1.25rem] text-[#00303e]"><div class=" mb-[1.25rem]" v-for="item, index in desArray" :key="index"><div class="mb-[1.25rem]">{{ item.content }}</div><ul v-if="item.child.length > 0" class="list-disc pl-[2.5rem] text-lg"><li v-for="value, index in item.child" :key="index"><div class="font-bold">{{ value.title }}</div><div>{{ value.content }}</div></li></ul></div></div></template>
</Description>