Vue 插槽

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

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

默认插槽（单个插槽）

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



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

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

将组件与数据用于插槽


  这个会放在 slot 里

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

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

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

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


  
    
  
  
    Default content

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