v-slot详解

今天看朋友的项目中看到用了v-slot，表示本吊从来没用过，就突然了解了下。

*此为vue2.6之前的用法

1、slot 组件传标签（父->子）

父组件

1.  
   <template>
2.  
   <div class='father'>
3.  
   <!--子组件-->
4.  
   <child>
5.  
   <div class="item" slot='slot1'>父组件内容1</div>
6.  
   <div class="item" slot='slot2'>父组件内容2</div>
7.  
   <div class="item" slot='slot3'>父组件内容3</div>
8.  
   </child>
9.  
   </div>
10.  
    </template>
11.  
    复制代码

slot='slot1'，slot1相当于id，子组件会根据这个来找到父组件的元素来进行匹配 子组件

1.  
   <template>
2.  
   <div class='child'>
3.  
   <!--slot-->
4.  
   <slot name = 'slot1'></slot>
5.  
   <slot name = 'slot2'></slot>
6.  
   <slot name = 'slot3'></slot>
7.  
   </div>
8.  
   </template>
9.  
   复制代码

• 总结: 这个是父组件把自己内的元素传给子组件，样式只能由子组件内的css来修改。 个人改进很鸡肋，为什么不直接在子组件内写呢？

---

2、v-slot 组件传标签（父->子）

*此为vue2.6之后的用法

• 此版本舍弃了 slot 和 slot-scope

父组件

1.  
   <div class='father'>
2.  
   <template v-slot:footer>
3.  
   <!--传标签给子组件-->
4.  
   <div>我是父元素的标签div</div>
5.  
   </template>
6.  
   </div>
7.  
   复制代码

子组件

1.  
   <div class='child'>
2.  
   <template name="footer">
3.  
    
4.  
   </template>
5.  
   </div>
6.  
   复制代码

• 总结 道理同上，但是template必需得写

---

3、v-slot 标签传值(子->父)

父组件

1.  
   <div class='father'>
2.  
   <template v-slot:footer='slotPorps'>
3.  
   <div>{{slotPorps.footer}}</div> <!--输出'我是子组件的参数'-->
4.  
   </template>
5.  
   </div>
6.  
   复制代码

子组件

1.  
   <div class='child'>
2.  
   <template name="footer" footer='我是子组件的参数'>
3.  
    
4.  
   </template>
5.  
   </div>
6.  
   复制代码

总结

• 子组件定义name，父组件使用v-slot:name来打通父子组件。
• 父组件必需写上template标签，格式为v-slot:name="slotProps"。
• 子组件必需写上 name,相当于一个标记,一个ID。
• 父组件向子组件传标签，子组件向父组件传值。