exam组件提供slot

src/components/exam/examCard.vue

@@ -12,6 +12,9 @@
         <div class="left">
           <question-list :data="currentQuestionGroup" :index="currentPage" :disabled="disabled" :hasResult="hasResult">
             <template #index>{{ currentPage + 1 }}/{{ questionGroups.length }}</template>
+            <template v-slot:default="data">
+              <slot name="question-item" v-bind="data"></slot>
+            </template>
           </question-list>
         </div>
         <div class="right">
@@ -20,7 +23,9 @@
             :list="questionGroups"
             :data="currentQuestionGroup"
             @page-change="handlePageChange"
-          ></question-numbers>
+          >
+            <slot name="students" v-bind="{ data: currentQuestionGroup }"></slot>
+          </question-numbers>
         </div>
       </div>
       <div class="foot" id="foot-h">
@@ -155,15 +160,16 @@ export default {
     prev() {
       if (this.currentPage <= 0) return
       this.currentPage--
-      this.$emit('page-change', this.currentQuestionGroup, this.questionGroups)
+      this.handlePageChange(this.currentPage)
     },
     // 下一题
     next() {
       const total = this.questionGroups.length
       if (this.currentPage + 1 >= total) return
       this.currentPage++
-      this.$emit('page-change', this.currentQuestionGroup, this.questionGroups)
+      this.handlePageChange(this.currentPage)
     },
+    // 翻页
     handlePageChange(index) {
       this.currentPage = index
       this.$emit('page-change', this.currentQuestionGroup, this.questionGroups)

src/components/exam/questionList.vue

@@ -14,7 +14,9 @@
         :key="item.id"
         v-bind="$attrs"
         v-on="$listeners"
-      />
+      >
+        <slot v-bind="{ item, data }"></slot>
+      </question-list-item>
     </div>
   </div>
 </template>

src/components/exam/questionListItem.vue

@@ -35,6 +35,7 @@
           :disabled="disabled"
         ></el-input>
       </template>
+      <slot></slot>
     </div>
     <div class="question-list-item-ft" v-if="hasResult">
       <h3 class="question-list-item-ft__title">答案解析</h3>

src/components/exam/questionNumbers.vue

@@ -16,6 +16,7 @@
         </ul>
       </div>
     </div>
+    <slot></slot>
     <ul class="flag-tips" v-if="true">
       <li>
         <div class="circle1"></div>

src/pages/exam/myExam/questionDetails.vue

@@ -13,7 +13,22 @@
     @delete="deleteQuestion"
     ref="exam"
     v-if="Object.keys(data).length"
-  ></exam-card>
+  >
+    <template v-slot:question-item="{ item, data }">
+      <div>
+        单个试题
+      </div>
+      {{ item }}
+      <div>
+        整页数据,也就是一组
+      </div>
+      {{ data }}
+      <div class="div">13123</div>
+    </template>
+    <template v-slot:students="{ data }">
+      {{ data }}
+    </template>
+  </exam-card>
 </template>
 <script>
 import * as api from '@/api/exam.js'