1.编写组件my-slot1;
2.在组件里添加（默认插槽或者具名插槽）;
// 默认插槽
<slot></slot>
// 具名插槽
<slot name="title"></slot>
3.调用该组件（my-slot1），往插槽里放东西;
<div>
<my-slot1>
<ul>
<li>11111</li>
<li>22222</li>
<li>3333333</li>
</ul>
<!-- 要分发的内容放到下面，分发的内容可以是组件或者html片段 -->
<div slot="title">this is title</div>
</my-slot1>
</div>
基本的slot就是这么应用的了
如果具有slot的组件被循环时会报如下错误，要解决可以使用作用域插槽
[Vue warn]: Duplicate presence of slot "default" found in the same render tree - this will likely cause render errors.
4.作用域插槽(scoped slots)
组件被循环时slot只能用作用域插槽。
下面的例子中stuQuestionPractice组件是展示一道题目的组件，题目有很多道时就会出现循环，现在需求增加了，要显示题目的来源以及难度，所以就在改组件上进行扩展了。
使用作用域插槽的要点：
-
slot所在的组件要传递所使用的数据：image.png
-
父组件去使用时，插槽里的数据要用slot上传递进去的数据image.png
这样就不会报错了。
stuQuestionPractice.vue组件如下：
<template>
<div class="testBox clearfix" :key="testData[item].question.objectId" :data-id="testData[item].question.objectId">
<!-- 小题题目 -->
...(此处代码省略)
<div v-for="(i,i_index) in testData[item].question.subQuestions" :key="i_index">
<!--小题选项 -->
...(此处代码省略)
<!-- 该组件被循环时slot只能用 作用域插槽(scoped slots) -->
<slot :paperData="testData[item]"></slot>
</div>
</div>
</template>
// 使用stuQuestionPractice.vue组件
<div>
<template v-for="(item, index) in Object.keys(testData)">
<stu-question-practice :key="index"
:test-data="testData"
:last-order="1"
:paper-id="paperId"
:item="item"
:index="index"
:mode='1'
:is-show-all="true">
<!-- 作用域插槽(scoped slots) -->
<template slot-scope="props">
<div class="p-suorce-info">
<div class="p-difficulty"
:class="{
'difficulty1': props.paperData.question.difficulty === 1,
'difficulty2': props.paperData.question.difficulty === 2,
'difficulty3': props.paperData.question.difficulty === 3,
'difficulty4': props.paperData.question.difficulty === 4,
'difficulty5': props.paperData.question.difficulty === 5
}">难度：</div>
<div class="p-source clearfix">
<span class="source-title">来源：</span>
<span class="source-name" v-html="props.paperData.question.paper.paperName"></span>
</div>
</div>
</template>
</stu-question-practice>
</template>
</div>
