vue 跨组件插槽使用

封装组件会有嵌套使用情形。比如，有一个标题组件，传标题名称就行。现在有一个背景组件，需要引用标题组件。因为标题组件的名称是参数接收。示例代码：

父组件：

<template>
  <card-bg :titleName="titleName">
    
  </card-bg>
</template>

背景组件：

<template>
  <div class="bg-box">
    <card-title :statRange="statRange" :name="titleName" :slotName="titleSlot">
      <!-- #[插槽名称]=”插槽数据“  -->
      <template #[titleSlot]="slotData">
          <slot :name="titleSlot" :slotData="slotData"></slot>
      </template>
    </card-title>
    <div class="bg-content">
      <slot></slot>
    </div>

  </div>
</template>

<script>
import cardTitle from './titleTag.vue';
export default {
  name: 'cardBg',
  components: {cardTitle},
  props: {
    titleName: {
      type: String,
      default: '标题'
    },
    // 标题插槽名称
    titleSlot: {
      type: String,
      default: ''
    },
    statRange: {
      type: String,
      default: ''
    }
  }
};
</script>

标题组件：

<template>
  <div class="title-tag">
    <span class="title-name">{{ name }}</span>
    <span v-if="statRange" class="stat-range">统计周期：{{statRange}}</span>
    <slot
      v-if="slotName"
      :name="slotName"
    ></slot>
  </div>
</template>
<script>
export default {
  name: 'titleTag',
  props: {
    name: {
      type: String,
      default: '请输入标题',
      required: true
    },
    statRange: {
      type: String,
      default: ''
    },
    slotName: {
      type: String,
      default: ''
    }
  }
};
</script>