深入理解插槽

个人理解：slot 即是 子组件向父组件暴露的接口，父组件可以通过v-slot 来管理接口

基础篇：
##当父组件定义内容时，子组件定义插槽slot , 父组件内容显示在插槽中

##当父组件定义内容时，子组件定义插槽slot ,同时插槽也定义内容时, 子组件插槽内容不显示

##当父组件不定义内容时，子组件定义插槽slot ,同时插槽也定义内容时, 插槽内容显示

##当父组件不定义内容时，子组件定义插槽slot ,不定义内容,

父组件:
	<template>
  <div>
    <!-- 具名插槽 -->
    <child v-slot>我在插槽后面</child>
  </div>
</template>


<script>
import child from '@/components/Chacao/test1.vue'
export default {
  components: { child }
}
</script>

子组件：
<template>
  <div>
    我是一个插槽
    <slot></slot>
    <br />
  </div>
</template>

升级篇: 具名插槽

<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽,
一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

父组件:
<template>
  <!-- 具名插槽 有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件 -->
  <div class="container">
    <child>
      <template v-slot:header>
        <h1>插槽header</h1>
      </template>
      <p>内容P</p>
      <template v-slot:footer>
        <p>插槽footer</p>
      </template>
    </child>
  </div>
</template>

子组件:
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。

##如果 v-slot:header 不写 ，其中header不写，结果： 内容P 不显示，

后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。