xcx

src/components/userList/index.vue

 <template>
   <div class="components">
     <ul class="centerLabel userList">
-      <item v-bind="data"></item>
+      <item></item>
       <item></item>
       <item></item>
     </ul>

src/pages/page3.vue

         </div>
         <div :hidden="showSlide">
           <ul class="centerLabel userList">
-            <li v-for="(item, index) in userList" :key="index" :class="{'active': item.show}">
-              <span>{{item.firstName}}</span>
-              <span>{{item.words}}</span>
-            </li>
+            <userList></userList>
           </ul>
         </div>
       </div>
 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import solarLunar from 'solarLunar'
+import userList from '../components/userList'
 const { mapState: mapPageState, mapActions: mapPageActions, mapMutations: mapPageMutations } = createNamespacedHelpers('newIndex')
 export default {
   name: 'projectIndex',
   },
   components: {
     swiper,
-    swiperSlide
+    swiperSlide,
+    userList
   },
   created () {
     this.init()