VUE--插槽slot（将父级的模块片段插入到子级中）

组件可以接收任意类型的JS值作为props，但我们想要为子组件传递一些模板片段，并在子组件中进行渲染时，此时可以采用插槽slot来实现

简单来说，插槽时组件内留一个或多个插槽的位置，供组件传递对应的模板代码（传递任意HTML的结构），插槽的存在使得组件变的更为灵活

---

 Slot与Props的比较

使用props的方式传递以下的模版片段：

  
父级标题
  
父级内容

Props的方式

// Parent.vue

// Child.vue

使用插槽slot的方式

// Parent.vue

// Child.vue

通过props和slot的比较，可看出当模块结果过于复杂时，插槽slot是更优选

插槽默认内容

当父级未提供任何内容给子级的情况下，子级可为插槽指定默认内容

// Parent.vue 中的 template块

// Child.vue 中 的template块

具名插槽

具名插槽：即带名字的插槽，当需要在组件内预留多个插槽的位置时，则需为插槽定义名字，指定插入的位置

注：

为具名插槽传入内容时：

对于父级组件，需要使用一个含 v-slot 指令的