介绍

在Vue中提供了一个内置组件：「slot」，官方称之为「插槽」。其作用主要是为了做内容分发。内容分发这个词理解起来可能不太直观，如果学习过Angular，就可以将它理解为Angular中的ng-content，ng-content的解释是「内容投影」，就将内容投影到组件的ng-content中。slot和它的作用是一样的。

如何使用

在官方中给出了通过插槽分发内容的例子。

首先定义一个组件，在组件模板中使用「slot」标记插槽在模板中的位置：

Vue.component('alert-box', {
  template: `
    

      Error!
      
    
  `
})

使用自定义组件：

  Something bad happened.

其中， “Something bad happened.”作为内容被分发到自定义组件中的「slot」处，效果如下：

  Error!
  Something bad happened.

这样我们就通过使用「slot」完成了内容分发。

应用场景

slot的应用场景有很多，如通过slot实现统一的布局、结构、效果等。在 Element UI中就有许多使用slot的组件。如表单中的FormItem：

  

    
      
        {{label + form.labelSuffix}}
      
    
    

      
      
        
          

            {{validateMessage}}
          
        
      
    
  

在FormItem组件中，使用到了3个slot，从上而下它们的作用分别是：

进阶

命名

在FormItem的例子中，发现在slot中使用到了name属性。name是用来命名插槽的。在模板中通过name来区分多个插槽。

要实现上面的效果，就可以使用具名插槽：

不带name属性的插槽，会带有隐含的名字“default”。使用如下：

  
    
Here might be a page title
  
  
A paragraph for the main content.
  
And another one.
  
    
Here's some contact info
  

渲染效果如下：

  

    
Here might be a page title
  
  

    
A paragraph for the main content.
    
And another one.
  
  

缩写

具名插槽的使用时的v-slot可以缩写为：

  
    
Here might be a page title
  
  
A paragraph for the main content.
  
And another one.
  
    
Here's some contact info
  

插槽 prop

在实际开发过程中，很多时候需要将组件内的数据通过slot的方式提供给外部使用，此时，就是通过slot属性的方式将数据传递到组件外：

current-user

  
    {{ user.lastName }}
  

使用时：

  
    {{ slotProps.user.firstName }}
  

只有默认插槽时，我们可以对上面的使用方式进行简化：

  {{ slotProps.user.firstName }}

不带参数的slot默认为default，所以还可以简化为：

  {{ slotProps.user.firstName }}

解构插槽prop

在ES中，提供了对象解构功能，所以我们也可以使用解构的方式来处理slot：

  {{ user.firstName }}

此处可以理解为：

let { user } = slotProps

通过解构的方式，将slotProps的user属性提取出来。

总结

「slot」的内容分发功能，可以帮助开发者更加方便的实现布局结构组件化的复用。同样也是开发者进阶的一个标志。

限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： lzxmw777