vue 组件中slot的使用

slot怎么在组件中写入，页面中使用？

首先在组件中写入插槽slot标签,要定义name，在引入页面中要这么写 v-slot:name

为什么要写name，应该是怕一个组件中写入多个插槽，以便于区分

举个栗子:

在组件中

<div class="mainTit">
   <!-- 可以写入简单的文字 -->
   <span class="subtitle" v-show="show">{{ title }}</span>
    <!-- 使用slot插槽，可以写入代码块 -->
   <div class="title"><slot name='subtitle'></slot></div>
</div>

在需引入的页面中

<PageTitle>
 <template v-slot:subtitle>
  <div>
   年月：&nbsp;&nbsp;
   <span v-if="isProdEnv">2020-12-12&nbsp;&nbsp;&nbsp;&nbsp;</span>
   <el-date-picker v-else value-format="yyyy-MM" :clearable="false" :picker-options="pickerOptions"  v-model='searchForm.yearAndMonth' type='month' placeholder='选择月' style="width:120px"></el-date-picker>
   </div>
 </template>
</PageTitle>