Vue 插槽

本文参考官网的插槽，你可以在 CodeSandBox 测试效果，基本模板已经给出。

在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。

默认插槽（单个插槽）

使用 标签来提供一个占位符的作用，父组件可以在使用该组件时，传递一些内容。

  
我是一个标题
  
    仅在没有插槽内容时显示
  

你可以在 添加默认内容，它只会在没有提供内容的时候被渲染。

将组件与数据用于插槽

  
这个会放在 slot 里

当组件渲染的时候， 将会被替换为你指定的内容。

注意：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

具名插槽（多个插槽）

自 2.6.0 起有所更新。已废弃的使用 slot 属性的语法在这里。

对于这样的情况， 元素有一个特殊的属性：name。这个属性可以用来定义额外的插槽：

  

    
  
  

    Default content
  
  

    
  

一个不带 name 的 出口会带有隐含的名字 default。

在向具名插槽提供内容的时候，我们可以在一个