vue的web ui框架：
上面就是vue的web ui框架，也就是css框架
上面的AI的回答明显就是答非所问，牛头不对马嘴，典型的降智
我问的明明是web ui，但是它回答组件复用
上面的降智，导致我有个想法，能否用插槽写一个vue的demo
于是，马上动手
其实，有的时候，有图片确实好看，但是巧妇难为无米之炊，有时需要文字排版的衬托
就是图文并举，才有美观！
<template>
<div class="card">
<!-- 卡片头部插槽 -->
<div class="card-header">
<slot name="header"></slot>
</div>
<!-- 卡片图片插槽 -->
<div class="card-image">
<slot name="image"></slot>
</div>
<!-- 卡片内容插槽 -->
<div class="card-content">
<slot name="content"></slot>
</div>
<!-- 卡片底部插槽 -->
<div class="card-footer">
<slot name="footer"></slot>
</div>
</div>
</template>
上面是子组件定义slot
下面是父组件实现内容分发
<template>
<div class="card-list">
<Card v-for="card in cards" :key="card.id" class="card-item">
<!-- 头部插槽 -->
<template #header>
<div class="card-title">
<h2>{{ card.title }}</h2>
<span class="category">{{ card.category }}</span>
</div>
</template>
<!-- 图片插槽 -->
<template #image>
<img :src="card.image" :alt="card.title" />
</template>
<!-- 内容插槽 -->
<template #content>
<p>{{ card.content }}</p>
</template>
<!-- 底部插槽 -->
<template #footer>
<div class="footer-content">
<span class="date">{{ card.date }}</span>
<button class="read-more">阅读更多...</button>
</div>
</template>
</Card>
</div>
</template>
为什么，我对slot也就是插槽这么执着，在react中的{children}的功能，我是知道的，功能很强大。但是插槽是什么东东，我一没有经验，二没有资料，经这次降智，我突然发现，原来vue的插槽就是{children}，组件用来实现内容分发。这真是歪打正着，于是我就构思了这个demo。
我于是脑洞大开，能否用slot实现modal就是模拟态
于是写了上面这个demo，不过很丑
页:
[1]