vue的web ui框架：

上面就是vue的web ui框架，也就是css框架

上面的AI的回答明显就是答非所问，牛头不对马嘴，典型的降智

我问的明明是web ui，但是它回答组件复用

上面的降智，导致我有个想法，能否用插槽写一个vue的demo

于是，马上动手

其实，有的时候，有图片确实好看，但是巧妇难为无米之炊，有时需要文字排版的衬托

就是图文并举，才有美观！

1. <template>
   
2.   <div class="card">
   
3.     <!-- 卡片头部插槽 -->
   
4.     <div class="card-header">
   
5.       <slot name="header"></slot>
   
6.     </div>
   
7. 
   
8.     <!-- 卡片图片插槽 -->
   
9.     <div class="card-image">
   
10.       <slot name="image"></slot>
    
11.     </div>
    
12. 
    
13.     <!-- 卡片内容插槽 -->
    
14.     <div class="card-content">
    
15.       <slot name="content"></slot>
    
16.     </div>
    
17. 
    
18.     <!-- 卡片底部插槽 -->
    
19.     <div class="card-footer">
    
20.       <slot name="footer"></slot>
    
21.     </div>
    
22.   </div>
    
23. </template>

复制代码

上面是子组件定义slot

下面是父组件实现内容分发

1. <template>
   
2.   <div class="card-list">
   
3.     <Card v-for="card in cards" :key="card.id" class="card-item">
   
4.       <!-- 头部插槽 -->
   
5.       <template #header>
   
6.         <div class="card-title">
   
7.           <h2>{{ card.title }}</h2>
   
8.           <span class="category">{{ card.category }}</span>
   
9.         </div>
   
10.       </template>
    
11. 
    
12.       <!-- 图片插槽 -->
    
13.       <template #image>
    
14.         <img :src="card.image" :alt="card.title" />
    
15.       </template>
    
16. 
    
17.       <!-- 内容插槽 -->
    
18.       <template #content>
    
19.         <p>{{ card.content }}</p>
    
20.       </template>
    
21. 
    
22.       <!-- 底部插槽 -->
    
23.       <template #footer>
    
24.         <div class="footer-content">
    
25.           <span class="date">{{ card.date }}</span>
    
26.           <button class="read-more">阅读更多...</button>
    
27.         </div>
    
28.       </template>
    
29.     </Card>
    
30.   </div>
    
31. </template>

复制代码

为什么，我对slot也就是插槽这么执着，在react中的{children}的功能，我是知道的，功能很强大。但是插槽是什么东东，我一没有经验，二没有资料，经这次降智，我突然发现，原来vue的插槽就是{children}，组件用来实现内容分发。这真是歪打正着，于是我就构思了这个demo。

我于是脑洞大开，能否用slot实现modal就是模拟态

于是写了上面这个demo，不过很丑

今天继续modal的编写，写了一个Note demo

点击右上角的黑色园点就添加一个Note记录

一个简单的modal完整的奉上