slot:插槽，官方示例地址：https://cn.vuejs.org/v2/guide/components-slots.html
只有一个插槽时，有默认名称“default”;
当有两个及以上时，对slot进行命名；使用的时候在<template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称
定义页面:slotDemo.vue
<template>
<div>
<label>slot演示</label><br/>
<slot></slot><br/>
<slot name="first"></slot><br/>
<label>第二个slot</label><br/>
<slot name="second"></slot>
</div>
</template>
<script lang="ts">
import Vue from ‘vue‘;
import Component from "vue-class-component"
/**
* 模板页面
*/
@Component({})
export default class SlotDemo extends Vue {
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
调用页面:SlotShow.vue
<template>
<div>
<u-slot-demo>
default slot
<!--一个不带 name 的 <slot> 出口会带有隐含的名字“default”。-->
<template v-slot:first>
I am fist-slot
</template>
<template slot="second">
I am second-slot
</template>
</u-slot-demo>
</div>
</template>
<script lang="ts">
import Vue from ‘vue‘;
import Component from "vue-class-component"
import slotDemo from "./slotDemo.vue";
/**
* 调用页面
*/
@Component({
components:
{
"u-slot-demo": slotDemo // 组件
}
})
export default class SlotShow extends Vue {
protected person: any = {FirstName: "qiong"};
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
原文：https://www.cnblogs.com/JoanLin-workNotes/p/12496209.html