vue如何动态的引入组件

Question

我想实现通过后台数据来引用不同的组件，比如我拿到了id为1的数据，我就想引用我写好的1.vue文件，因为有可能有上千个这种文件，我需要后台的数据来定位是哪一个文件，请问这种该怎么解决呀

Answer 1

<component :is="你的组件名"></component>

Answer 2

也可以这样，先引入组件，用v-if，显示满足条件的组件，当然如果组件多的话，会麻烦些

Answer 3

这个是我的解决方案
不知道是不是比较通用或者正确的解决方案, 用render函数去判断要渲染哪个标签

//run.vue

// homeComponents 是异步组件列表.

    import homeComponents from '@/assets/js/homeComponents';

    export default {

        render: function(cElement, context) {

            return cElement(homeComponents[this.temp.type], {

                props: {

                    temp: this.temp,// 组件数据

                }

            })

        },

        props: {

            temp: {

                type: Object,

                required: true,

                default: {}

            },

        }

// home.vue

// 只要注册这个 run 组件, 然后传入 temp , 根据temp.type, 去渲染相应的 component

// 这样你只要在页面上写一个run组件, 传入 type, 就会异步加载你需要的组件

<template>

    <run v-for="node in element" :temp="node" :key="node.fieldId" />

</template>

其实就是实现了官网里的 component 标签的功能. 感觉这样更灵活吧