Vue-插槽

<slot></slot>是Vue为组件封装者提供的一个功能

开发者在封装组件的时候，把不确定的希望由用户指定的部分定义为插槽

也就是说插槽部分可以由用户自定义UI结构

<slot name="default"></slot>

每一个slot插槽都会有一个name属性来指定其名称

当然我们可以省略--因为Vue会默认为我们的插槽添加一个默认name属性：default

当插槽有了name属性，那么这个插槽也相应的变为一个具名插槽

具名插槽和作用域插槽有一个统一的语法：v-slot指令

v-slot只能用在组件节点components或者template标签下

作用域插槽：在封装组件的时候，我们为预留的slot提供属性对应的值

（给slot一个属性），这样的话，在主组件中也是可以访问到这个数据的，也就是组件间的数据传递 

接收数据：

//v-slot的简写
<template #名称="scope"></template>

//or

<template v-slot:名称="scope"></template>

//scope接收到的是一个对象，里面包含了所有传过来的数据

**template标签只是一个虚拟的标签，只会起到一个包裹的作用，是不会被渲染为实质性的HTML元素的

 当然我们可以给到slot标签一个默认的内容，当用户没有指定渲染内容的时候，我们会默认显示这个内容：

<template #名称="scope">
    <div>暂无显示内容</div>
</template>

我们称它为：后备内容

---

演示：

//子组件
<template>
  <div id="Son">
    <div>我是子组件</div>
    <slot name="son" msg="我是子组件Son传来的数据msg">
      <div>Hello-Vue</div>
    </slot>
  </div>
</template>

//父组件
<template>
  <div id="app">
    <div>App组件</div>
    <Son>
      <template #son="scope">
        <div>你好Vue</div>
        <div>{{ scope }}</div>
      </template>
    </Son>
  </div>
</template>

 当用户没有指定内容时：

<template>
  <div id="app">
    <div>App组件</div>
    <Son>
      <template #son>
      </template>
    </Son>
  </div>
</template>

 输出后备内容：

 使用解构赋值：

<template>
  <div id="app">
    <div>App组件</div>
    <Son>
      <template #son="{ msg }">
        <div>你好Vue</div>
        <div>{{ msg }}</div>
      </template>
    </Son>
  </div>
</template>