（九）插槽

// 需要在子组件当中使用 <slot></slot> 标签进行占位
<template>
  <div class="card">
    <div class="title">{{ title }}</div>
    <div class="content">
      <slot></slot>

      // 插槽也可以设置默认值内容，当父组件没有像插槽中添加html 元素时就显示默认值内容
      <!-- <slot>
        <p>默认卡片内容</p>
      </slot> -->
    </div>
  </div>
</template>

<template>
  <main>
    <div>
      // 这里标签当中的内容会默认放到子组件标签中slot 标签的位置
      <BaseCard title="卡片容器">
        <p>这是卡片的内容</p>
        <p>可以插入任何 HTML 模板</p>
        <a href="#">这是一个超链接</a>
      </BaseCard>
    </div>
  </main>
</template>

<template>
  <div class="card">
    <div class="title">
      <slot name="title"></slot>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<template>
  <main>
    <div>
      <BaseCard>
        <!-- <template v-slot:title> -->
        <template #title>
          <h2>卡片标题</h2>
        </template>
        <!-- <template v-slot:content> -->
        <template #content>
          <p>这是卡片的内容</p>
          <p>可以插入任何 HTML 模板</p>
          <a href="#">这是一个超链接</a>
        </template>
      </BaseCard>
    </div>
  </main>
</template>

<template>
  <div class="card">
    <div class="title">
      <slot name="title" msg="hello我是插槽子组件向父组件传递的内容的内容"></slot>
    </div>
    <div class="content">
      <slot name="content" title="我也是"></slot>
    </div>
  </div>
</template>

<template>
  <main>
    <div>
      <BaseCard>
        <template #title="msg">
        <!-- 这里的内容就是子组件向父组件传递的内容 -->
        <div>{{msg}}</div>
        </template>
      </BaseCard>
    </div>
  </main>
</template>

<!-- 我们使用不带名字的插槽的时候，其实有一个默认的名字 -->
<template v-slot:default>
<template/>

<!-- 命名插槽也是一样的通过 v-slot 来绑定插槽的名字 -->
<template v-slot:title>
<template/>

<!-- 同时以上这些所有v-slot都可以简写为 # -->
<template #:default>
<template/>

<template #:title>
<template/>