Vue.js学习记录-6-Vue进阶：插槽

7.插槽

• 插槽slot

  父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就要用到插槽slot了。

  换句话说：

  当子组件所渲染的内容部分来自于父组件DOM的时候，建议使用插槽slot进行DOM结构的插入。详情见下图：
  

  TIPS：子组件中采用<template>模板占位符无效，务必使用<div>进行DOM结构包裹。

• 具名插槽

  <slot> 元素可以用一个特殊的属性 name 来配置如何分发内容，多个插槽可以有不同的名字。

  具名插槽将匹配内容片段中有对应 slot 特性的元素。
  

• 作用域插槽：使组件更加通用和可复用

  带数据的可复用插槽，作用域插槽可以通过子组件绑定数据传递给父组件。

  场景：当子组件模板进行数据循环渲染操作，父组件需要获取子组件数据的场景下。
  

  TIPS：在vue 2.5.0+ slot-scope不再限制在<template>元素上使用，而可以用在插槽内的任何元素或组件上。