这里有一份Vue动态组件解决方案，你想看吗？

傷城~ 2022-01-19 05:23 195阅读 0赞

千言万语敌不过一张动图

都是有身份的程序猿，以码会友：

const DynamicComponent = {
      props: {
        componentName: {
          type: String,
          required: true
        },
        componentProps: {
          type: Object,
          default: () => {
          }
        },
        styles: {
          type: Object,
          default: () => {
          }
        }
      },
      render(createElem) {
        return createElem(this.componentName, {
          props: this.componentProps
        })
      }
    }
    export default DynamicComponent;
    
    复制代码

使用的示例：

<DynamicComponent v-for="(item, index) in componentsArray"
                            :key="index"
                            :componentName="item.component"
                            :componentProps="item.props"></DynamicComponent>
    复制代码

就酱子。动态的往数据里面放数据即可

![\\color\{red\}\{注意：需要动态加载的组件都需要使用 Vue.component() 注册，不然会报组件没有注册的错误！\}][color_red_ Vue.component_]

[github.com/GaoGersy/Dy…][github.com_GaoGersy_Dy]

**点个赞再走吧**

这篇文章如果能拿下100个喜欢我就去买一块荣耀Magic手表奖励自己，说到做到！您的赞是我为国家GDP做贡献的原动力！

**关注微信公众号有惊喜哟，关注就送Vue从入门到放弃全套视频教程**

转载于:https://juejin.im/post/5cc06605e51d456e3a5f0836

[color_red_ Vue.component_]: /images/20220119/2f85b1d14e4849388ec2c809c6000531.png
[github.com_GaoGersy_Dy]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FGaoGersy%2FDynamicComponent.git