vue中slot（插槽）

概念：slot用于将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
slot显不显示、怎样显示是由父组件来控制的，而slot在哪里显示就由子组件来进行控制

无slot

在父组件中，子组件标签里内套的内容，是不显示的

//父组件
<template>
  <div>
      //hello不显示，只显示我是子组件
      <v-child>hello</v-child>
  </div>
</template>

//子组件
<template>
    <div>
        <h3>我是子组件</h3>
    </div>
</template>

匿名slot

slot插槽可以将父组件标签里的内容，插到了子组件中的位置

//父组件
<template>
  <div>
      //hello显示，
      <v-child>hello</v-child>
  </div>
</template>

//子组件
<template>
    <div>
        <h3>我是子组件</h3>
        <slot></slot>//加了个slot标签，在父组件中，就可以让子组件标签内的内容显示啦
    </div>
</template>

具名slot

组件中有多个命名的slot插槽时，可以实现父组件对子组件的指定位置显示内容或传参

//父组件
<template>
  <div>
      <v-child>
          <p>hello</p>
          <h3 slot="header">header</h3>
      </v-child>
  </div>
</template>

//子组件
<template>
    <div>
        <h3>我是子组件</h3>
        <p><slot name="header">父组件中没header的时候会显示</slot></p>
        <p><slot name="footer">父组件中没footer的时候会显示</slot></p>
    </div>
</template>

详细