5插槽
插槽slot
  插槽内容
    Vue提供<slot>元素，用于内容分发
    如果在组件模板中使用了<slot></slot>，当组件使用时，组件中写入的东西会替换掉<slot></slot>
    写入的东西不限于字符串，还可以是其他组件或HTML代码
    如果在组件模板中没有使用<slot>，则在组件使用时写入的任何内容都会被抛弃
  渲染作用域
    在使用组件过程中，若想在插槽中使用数据，此时作用域与父级作用域相同
    插槽中不能访问子组件的作用域
    父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的
  备用内容
    所谓备用内容就是给插槽设置默认的内容
    用法：只要将备用内容放在 <slot> 标签内即可
    备用内容只会在组件时，其插槽没有提供内容时被渲染，如果提供内容，提供的内容会取代备用内容
  具名插槽
    <slot>元素有一个特殊的属性name，可以表示插槽的名字
    一个不带 name 的<slot>出口会带有隐含的名字“default”
    给具名插槽提供内容时，可以在一个 <template> 元素上使用 v-slot 指令，并给v-slot提供参数，这个参数与<slot>中name的值相对应
    <template> 元素中的所有内容都会传入相应名字的插槽中
    注意：通常v-slot 只能添加在 <template> 上
  作用域插槽
    使用场景
      有时我们希望插槽内容能够访问子组件中才有的数据，这就是作用域插槽的用武之地
    例如
      当一个组件被用来渲染一个项目数组时，我们希望能够自定义每个项目的渲染方式
      要使数据可用于父级提供的插槽内容，我们可以添加一个 <slot> 元素并将其绑定为属性
      可以根据自己的需要将很多的 attribute 绑定到 slot 上
      绑定在 <slot> 元素上的 attribute 被称为插槽 prop
    独占默认插槽的缩写语法
      只有默认插槽时，组件的标签可以被当作插槽的模板来使用，即直接将v-slot用于组件
      v-slot:default可以省略成v-slot
      注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确
    解构插槽 Prop
      作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里
      这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式，也可以使用 ES2015 解构来传入具体的插槽 prop
  动态插槽名
    动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
  具名插槽的缩写
    跟 v-on 和 v-bind 一样，v-slot 也有缩写
    v-slot:xxx缩写成#xxx
    注意，v-slot和其它指令一样，缩写只在其有参数的时候才可用