Vueのコンポーネントの動的登録とレンダリング---kalrry

はじめに：ディレクトリ構造

改善される

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

1.通常の方法

一般的な方法として、これは直接導入され、次のようにindex.vueに登録されます。

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

問題があります：コンポーネントが少ない場合は非常に便利です。コンポーネントが30または100を超える場合、それらを1つずつインポートするのは非常に面倒です。したがって、動的登録のために配列を動的にトラバースするのは非常に便利です。とレンダリング。

二、計画二

1つの解決策は、Vue.componentを使用してグローバルコンポーネントを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']
      }
    },
    created () {
    
    
      this.comps.forEach(app => {
    
    
         Vue.components(app, res => require([`./dir/${
      
      app}.vue`], res))
      })
    }

  }
</script>

問題がありますが、このように各コンポーネントがグローバルコンポーネントとして登録されるため、ローカルコンポーネントとして登録する方向に改善しています。

三、計画三

index.vueでrequire+コンポーネントタグの非同期ロードを利用する

<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>

第四に、計画4

レンダリング関数を使用して、コンポーネントタグと同様の関数をカプセル化し、その中にいくつかの拡張機能を作成することもでき
ます。dirディレクトリに新しいファイルasyncLoadComp.vueを作成します。

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

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>