slot内容分发

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组件是展示一道题目的组件，题目有很多道时就会出现循环，现在需求增加了，要显示题目的来源以及难度，所以就在改组件上进行扩展了。

使用作用域插槽的要点：

1. slot所在的组件要传递所使用的数据： image.png
2. 父组件去使用时，插槽里的数据要用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>