动态加载组件

vue component使用，动态加载子组件，调用子组件方法_丝月的博客-CSDN博客_子组件加载后再调用方法

父子组件传值

Vue父组件获取子组件数据_表演系小学渣的博客-CSDN博客_vue父组件获取子组件的值

Day04_vue组件_组件通信_todo案例

vue——强制刷新子组件重新渲染_前端技术迷的博客-CSDN博客_vue 刷新子组件

vue父组件调用子组件this.$refs报错，undefined、not a function问题解决方法_银鞍照白马的博客-CSDN博客_not a function

父组件执行完才会执行子子组件的

父组件刷新，子组件如何跟着刷新？

Vue实现父子组件页面刷新的常用方法_一宿君的博客-CSDN博客_vue子组件刷新父组件

重点：vue实现动态注册并渲染组件 - 知乎

vue页面作为组件批量加载

<template>
 
  <div class="resumes">
 
    <swiper
 
      v-if="apps.length>0"
 
      ref="mySwiper"
 
      class="swiper"
 
      :options="swiperOptions"
 
    >
 
      <swiper-slide v-for="item in apps" :key="item.app">
 
        <component :is="item.app" />
 
      </swiper-slide>
 
  
 
    </swiper>
 
  </div>
 
</template>
 
  
 
<script>
 
  
 
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
// 导入swiper
 
import 'swiper/css/swiper.css'
 
  
 
import { getFileNames } from '@/utils/ruoyi'
 
  
  
 
export default {
 
  name: 'SwiperExampleGrabCursor',
 
  title: 'Grab cursor',
 
  components: {
 
    swiper,
 
    swiperSlide
 
  
 
  },
 
  props: [],
 
  data() {
 
    return {
 
      comps: ['green'],
 
      apps: [],
 
      swiperOptions: {
 
        slidesPerView: 4,
 
        centeredSlides: true,
 
        spaceBetween: 30,
 
        grabCursor: true,
 
        pagination: {
 
          el: '.swiper-pagination',
 
          clickable: true
 
        }
 
  
 
      }
 
    }
 
  },
 
  computed: {},
 
  watch: {},
 
  created() {
 
    // // 获取vue文件名
 
     this.$data.comps = getFileNames()
 
    this.comps.forEach(app => {
 
      this.apps.push({ app: require(`./resumes/${app}.vue`).default })
 
    })
 
  },
 
  mounted() {},
 
  methods: {
 
    vueToPdf() {}
 
  }
 
  
 
}
 
</script>
 
  
 
<style lang="scss" scoped>
 
  
 
</style>