Vue之插槽slot

当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot。这个过程叫做内容分发。

其主要特点为：

• 子组件不知道它的挂载点会有什么内容，挂载点的内容是由其父组件决定的。
• 子组件有自己的模板。

1. 作用域

首先需要了解一个概念： 编译的作用域。

父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。

slot分发的内容，作用域是在父组件上的。

2. slot用法

在子组件内使用元素就可以为这个子组件开启一个slot插槽，在父组件模板中，插入在子组件标签内的所有内容将代替子组件的标签及它的内容：

单个slot

    

        
            
分发的内容
            
更多分发的内容
        
    

    
    

执行结果

如果将上述代码中的这部分注释：

则执行结果如下：

执行结果

可见，在父组件没有使用slot时，会渲染子组件的默认文本；如果写入了slot将会替换整个。

具名slot

为元素指定一个name后可以分发多个内容，剧名Slot可以与单个Slot共存：

    

        
            
覆盖标题
            
            
覆盖底部
        
    

    
    

执行结果

子组件中声明了三个，其中

中的没有使用name属性，即为默认slot，如果父组件包含没有使用slot特性的元素都将出现在这里。

3. 作用域插槽

作用域插槽是一种特殊的slot，其使用一个可以复用的模板替换已渲染元素。

执行结果

上述代码在子组件的模板上，元素中有一个类似props传递数据给组件的写法msg="xxx"，将数据传到了插槽。父组件中使用