Vue的插槽（slot）

什么是插槽

在子组件中用<slot></slot>划出一块区域来显示父组件中的页面结构，显示的结构在父组件的子组件标签中设置就行）

插槽怎么显示数据

显示的结构在父组件的子组件标签中设置就行  

插槽分为几种

默认插槽 具名插槽 作用域插槽  

具名插槽（又称有名插槽）：通过 name 属性设置了名字的插槽

//父组件
<body-container>
  <div slot='header'>
    <!-- 我们希望把页头放这里 -->
  </div>
  <div slot='footer'> 
    <!-- 我们希望把页脚放这里 -->
  </div>
</body-container>
 
//子组件
<div>
    <slot name='header'></slot>
    <div>context</div>
    <slot name='footer'></slot>
</div>

作用域插槽怎么用  

在子组件<slot></slot>通过v-bind绑定一个属性，挂载变量

<slot name="content" v-bind:us="user"></slot>

在父组件中子组件标签上通过v-slot:插槽名=“变量”来接受数据  

<template v-slot:content="suibian">
       <div>
       这是一个dialog{{suibian.us.username}}
       </div>
</template>