Registro dinámico de Vue y renderizado de componentes---kalrry

Introducción: estructura de directorios

Ser mejorado

index.vue
dir{
	//目录文件夹
	comp1.vue
	comp2.vue
}

1. Método ordinario

Como práctica general, se introduce y registra directamente en index.vue así:

import comp1 from './dir/comp1.vue'
import comp2 from './dir/comp2.vue'
....
export default {
    
    
  components: {
    
    
    comp1,
    comp2...
  }
}

Hay un problema : es muy conveniente si hay pocos componentes, si hay más de 30 o 100 componentes, es muy problemático importarlos uno por uno, por lo tanto, es muy conveniente recorrer dinámicamente una matriz para el registro dinámico. y renderizado.

Dos, plan dos

Una solución es usar Vue.component para registrar componentes globales en index.vue y usarlos para renderizado dinámico.

<template>
    <div>
        <component v-for="app in comps" :is="app"></component>
    </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    
    
    data () {
    
    
      return {
    
    
        comps: ['comp1', 'comp2']
      }
    },
    created () {
    
    
      this.comps.forEach(app => {
    
    
         Vue.components(app, res => require([`./dir/${
      
      app}.vue`], res))
      })
    }

  }
</script>

Hay un problema : pero de esta manera cada componente se registra como componente global, por lo que estamos mejorando en la dirección de registrar como componente local.

Tres, plan tres

Utilice la carga asíncrona de las etiquetas require + componente en index.vue

<template>
    <div>
        <component v-for="app in comps" :is="app"></component>
    </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    
    
    data () {
    
    
      return {
    
    
        comps: ['comp1', 'comp2'],
        apps: []
      }
    },
    created () {
    
    
      this.comps.forEach(app => {
    
    
         this.apps.push({
    
    app: require(`./dir/${
      
      app}.vue`)})
      })
    }

  }
</script>

Cuarto, plan cuatro

Use la función render para encapsular una función similar a la etiqueta del componente, y también puede hacer algunas extensiones en
ella.Cree un nuevo archivo asyncLoadComp.vue en el directorio dir

<script>
  export default {
    
    
    render (h, cxt) {
    
    
      return h(require(`./dir/${
      
      this.app}.vue`), {
    
    
        props: {
    
    
          prop: this.prop
        }
      })
    },
    props: {
    
    
      app: String,
      prop: Object
    }
  }
</script>

Usar en index.vue

<template>
    <div>
        <async-load-comp v-for="comp in comps" :app="comp" :prop="prop"></async-load-comp>
    </div>
</template>
<script>
  import asyncLoadComp from './asyncLoadComp.vue'
  export default {
    
    
    components: {
    
    
      asyncLoadComp
    },
    data () {
    
    
      return {
    
    
        comps: ['comp1', 'comp2'],
        prop: {
    
    name: '张三'}
      }
    }
  }
</script>