本文共 980 字，大约阅读时间需要 3 分钟。

一,前言

Vue组件的三个API来源:props传递参数,events触发事件,slot内容分发前两个来源已经介绍过了,这一篇就来介绍slot内容分发

二,什么是slot

实际开发中,一些复杂的布局需要多个组件组合来实现混合父组件的内容与子组件的模板时,需要用到slot进行内容分发,slot也被称作插槽

三,slot的编译作用域

以下这段代码就包含一个插槽:

   
        {
   { message }}
   

父组件模板的内容是在父组件作用域内编译的,子组件模板的内容是在子组件作用域内编译的,代码中的message就是一个slot,message是来自父组件的数组所以,slot进行分发的内容,作用域在父组件

四,slot的使用

在一个子组件中,可以同时使用多个slot插槽,插槽通过
   
    元素使用也就是说,在子组件使用
    
     元素能为子组件开启一个slot插槽在父组件模板中,添加到子组件标签内的所有内容将会替代子组件对应
     
      标签及内容插槽分为默认插槽(不具名)和具名插槽(在
      
       内通过name属性命名)在内容分发时,会对应插槽名称进行替换,所有未匹配到的具名插槽将被舍弃如果子组件中存在默认插槽,所有slot属性为空的插槽都将出现在默认插槽中如果子组件中不存在默认插槽,组件内所有多余内容将被舍弃(不显示)在子组件模板中可以定义slot插槽的默认显示内容,当没有与之对应的插槽进行替换时,显示默认内容
      
     
    
   

   
    
            
     
标题
        
             
     
{
   { content1 }}
        
     
{
   { content2 }}
        
     
底部
    
    
   

运行结果:

在子组件child-component中定义了4个插槽:3个具名插槽+1个默认插槽slot=header和footer的插槽内容将被替换到子组件对应的插槽中没有使用slot指定名称的插槽内容,将被替换到子组件中的默认插槽中unknow插槽由于未匹配到传入的内容,所以显示默认内容

五,结尾

关于slot插槽以及插槽的简单使用就先介绍到这里,下一篇介绍作用域插槽