封装组件会有嵌套使用情形。比如,有一个标题组件,传标题名称就行。现在有一个背景组件,需要引用标题组件。因为标题组件的名称是参数接收。示例代码:
父组件:
<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>