Vue 版本：2.6.11    
    
    
，过期的API就不在这里进行赘述了   
    
    
。

1    
    
    
、什么是插槽了

插槽（Slot）是 Vue 提出来的一个概念    


     


     


，正如名字一样




 




 




 ，插槽用于决定将所携带的内容   

   

   
，插入到指定的某个位置     

     

     

，从而使模板分块




  




  




 ，具有模块化的特质和更大的重用性


     


     


     。插槽显不显示    


     


     


、怎样显示是由父组件来控制的
  


  


  
，而插槽在哪里显示就由子组件来进行控制

2




 




 




 、插槽的分类

插槽有三种：默认插槽   

   

   
、具名插槽     

     

     

、作用域插槽 




 




 



。

3




  




  




 、默认插槽的使用

3.1
  


  


  
、语法

<slot></slot>

3.2     
     
     
、示例

在子组件中定义了一个默认插槽：

<template> <div class="about"> <h1>This is an Children page</h1> <!-- 定义一个默认插槽 --> <slot></slot> </div> </template>

在开发中我们经常使用到组件之间的传值     
     
     
，但很多情况涉及到的都是数据属性的传值 




   




   




 ，现在如果是这种情况：

<template> <div class="about"> <h1>This is an Parent page</h1> <children> <!-- 一个p标签的dom结构 --> <p>子组件标签之间</p> </children> </div> </template> <script> import Children from ./Children.vue export default { components: { Children }, data () { return { } } } </script>

如果子组件中没有使用插槽的情况下：

<template> <div class="about"> <h1>This is an Children page</h1> </div> </template>

浏览器中的页面

 



 



 
，父组件中的p标签的内容是不会还给子组件的   

   

   

。

这时候               ，想让父组件定义的p标签传给子组件并显示  




    




    




 ，可以在子组件中定义一个默认插槽 <template> <div class="about"> <h1>This is an Children page</h1> <!-- 定义一个默认插槽 --> <slot></slot> </div> </template>

在子组件中













，你可以定义多个默认插槽               ，并在子组件中决定这些默认插槽的位置   



     



     



 ，父组件要插入的内容













，都会被填充到这些默认的插槽中：

<template> <div class="about"> <h1>This is an Children page</h1> <!-- 定义一个默认插槽 --> <slot></slot> <slot></slot> </div> </template>

当然    
    
    
，父组件定义要插入到子组件插槽的内容    


     


     


，并不一定是dom结构类型




 




 




 ，也可以是一个组件   

   

   
，也可以是普通的数据结构     

     

     

，只要子组件有定义插槽




  




  




 ，就会把内容填充进去

     

     

    。

4 




   




   




 、具名插槽的使用

4.1

 



 



 
、什么是具名插槽

其实就是在子组件中定义插槽时
  


  


  
，给对应的插槽分别起个名字     
     
     
，方便后边插入父组件将根据name来填充对应的内容
  




  




  


。

4.2               、语法

<slot name="名称"></slot>

4.3  




    




    




 、示例

在子组件中 




   




   




 ，定义两个具名插槽：

<template> <div class="about"> <h1>This is an Children page</h1> <!-- 给插槽加了个name属性

 



 



 
，就是所谓的具名插槽了 --> <slot name="one"></slot> <slot name="two"></slot> </div> </template>

父组件中：

为了验证               ，子组件中的插槽可以填充任何结构的内容  




    




    




 ，所以我这边专门在one插槽中插入一个组件













，而在two插槽就单纯插入一串普通的数据  


  


  


。

<template> <div class="about"> <h1>This is an Parent page</h1> <children> <template slot="one"> <p>one插槽</p> </template> <template slot="two"> two插槽 </template> </children> </div> </template> // 上面这个是 2.6.0 之前的语法               ，下面这个是 2.6.0 之后的语法 
     
     
   。 或 <template> <div class="about"> <h1>This is an Parent page</h1> <children> <template v-slot:one> <p>one插槽</p> </template> <template v-slot:two> two插槽 </template> </children> </div> </template> <script> import Children from ./Children.vue export default { components: { Children }, data () { return { } } } </script>

页面结果：

当然   



     



     



 ，子组件可以定义多个同名的具名插槽：

<template> <div class="about"> <h1>This is an Children page</h1> <!-- 给插槽加了个name属性













，就是所谓的具名插槽了 --> <slot name="one"></slot> <slot name="two"></slot> <slot name="two"></slot> </div> </template>

4.4













、缩写

把参数之前的所有内容 (v-slot:) 替换为字符 #

   




   




   

。例如 v-slot:header 可以被重写为 #header 



 



 



。

<children> <template #[dynamicSlotName]="slotProps"> <h2>{{slotProps.obj.name}}</h2> </template> </children>

然而    
    
    
，和其它指令一样    


     


     


，该缩写只在其有参数的时候才可用              。这意味着以下语法是无效的：

<children> <template #="slotProps"> <h2>{{slotProps.obj.name}}</h2> </template> </children>

如果你希望使用缩写的话




 




 




 ，你必须始终以明确插槽名取而代之：

<children> <template #default="slotProps"> <h2>{{slotProps.obj.name}}</h2> </template> </children>

5               、作用域插槽的使用

5.1   



     



     



 、什么是作用域插槽了

作用域插槽就是实现在子组件自行决定自己要显示什么内容

5.2













、语法

<slot :自定义的name=data中的属性或对象></slot>

5.3    
    
    
、示例

子组件：

<template> <div class="about"> <h1>This is an Children page</h1> <!-- 子组件中   

   

   
，告诉父组件我要实现obj里面的信息 --> <slot :obj="obj"></slot> </div> </template> <script> export default { data () { return { obj: { name: children } } } } </script>

父组件：

这种时候有一种情况需要注意：

如果子组件中只有一个作用域插槽且为默认插槽时     

     

     

，父组件可以使用下边这种简单的写法




  




  




 ，当然规范点还是加在template模板标签好点：

<template> <div class="about"> <h1>This is an Parent page</h1> <children v-slot="slotProps"> <p>one插槽{{slotProps.obj.name}}</p> </children> </div> </template> <script> import Children from ./Children.vue export default { components: { Children }, data () { return { } } } </script>

页面效果：

但是当子组件中有多个作用域插槽时
  


  


  
，不建议上边这种简单的写法     
     
     
，因为可能会出现作用域不明确的问题


    




    




    
。

子组件有多个作用域插槽时：

<template> <div class="about"> <h1>This is an Children page</h1> <slot :obj1="obj1" name="one"></slot> <slot :obj2="obj2" name="two"></slot> </div> </template> <script> export default { data () { return { obj1: { name: one slot }, obj2: { name: two slot } } } } </script>

父组件使用这种规范的写法 




   




   




 ，可以避免有时作用域不明确问题：

<template> <div class="about"> <h1>This is an Parent page</h1> <children> <template v-slot:one="slotProps"> <h2>{{slotProps.obj1.name}}</h2> </template> <template v-slot:two="twoSlotProps"> <h2>{{twoSlotProps.obj2.name}}</h2> </template> </children> </div> </template> <script> import Children from ./Children.vue export default { components: { Children }, data () { return { } } } </script>

页面效果：

6    


     


     


、动态插槽名

6.1




 




 




 、什么是动态插槽名

动态指令参数也可以用在 v-slot 上

 



 



 
，来定义动态的插槽名

6.2   

   

   
、示例

子组件：

<template> <div class="about"> <h1>This is an Children page</h1> <slot :obj="obj1" name="one"></slot> <slot :obj="obj2" name="two"></slot> </div> </template> <script> export default { data () { return { obj1: { name: one slot }, obj2: { name: two slot } } } } </script>

父组件：

<template> <div class="about"> <h1>This is an Parent page</h1> <children> <template v-slot:[dynamicSlotName]="slotProps"> <h2>{{slotProps.obj.name}}</h2> </template> </children> </div> </template> <script> import Children from ./Children.vue export default { components: { Children }, data () { return { dynamicSlotName: one } } } </script>

显示效果：

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//               ，就在评论处留言  




    




    




 ，作者继续改进；o_O???

如果你觉得该文章有一点点用处













，可以给作者点个赞；\\*^o^*//

如果你想要和作者一起进步               ，可以微信扫描二维码   



     



     



 ，关注前端老L

；~~~///(^v^)\\\~~~

谢谢各位读者们啦(^_^)∠※！！！