详解vue 动态加载并注册组件且通过 render动态创建该组件

更新时间：2019年05月30日 10:34:22 作者：DamagedBoy

这篇文章主要介绍了vue 动态加载并注册组件且通过 render动态创建该组件,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

基于 iview Tabs 组件实现

功能：为每个 tab 动态创建不同的、特定的组件内容，而不需要大量的 import 组件并进行 component 注册

Index.vue

<template>
  <div class="content-left-menu">
    <div class="item-contain layout-content">
      <Tabs class="cmcc-ivu-tab2" type="card" closable>
        <TabPane v-for="k in zj" :label="k.label" >
          <loader :vueName="k.vueName"></loader>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>

 import loader from './EntryLoader.vue'

  export default {
    components: {loader},
    data() {
      return {
        zj:[
          {label:'tab1',vueName:'workflow/Index'},
          {label:'tab2',vueName:'workflow/Index2'},
          {label:'tab3',vueName:'workflow/Index3'}
        ]
      }
    }
  }
</script>
EntryLoader.vue

<script>
  export default {
    props: ['vueName'],
    data() {
      return {}
    },
    created() {
      this.$options.components[this.vueName] = require('@/components/' + this.vueName + '.vue')
    },
    render: function (createElement) {
      return createElement(this.vueName)
    }
  }
</script>

总结

以上所述是小编给大家介绍的vue 动态加载并注册组件且通过 render动态创建该组件,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

vue根据进入的路由进行原路返回的方法
今天小编就为大家分享一篇vue根据进入的路由进行原路返回的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue.js函数式组件的全面了解
函数式组件就是函数是组件,组件是函数,它的特征是没有内部状态、没有生命周期钩子函数、没有this（不需要实例化的组件）,这篇文章主要给大家介绍了关于Vue.js函数式组件的相关资料,需要的朋友可以参考下
2021-10-10
vue中4个自定义指令讲解及实例用法
在本篇文章里小编给大家整理了一篇关于vue中4个自定义指令讲解及实例用法，有兴趣的朋友们可以跟着学习下。
2021-12-12
Element实现登录+注册的示例代码
登录注册是最常用的网站功能,本文主要介绍了Element实现登录+注册的示例代码,具有一定的参考价值,感兴趣的可以了解一下
2023-09-09
vue如何使用driver.js实现项目功能向导指引
driver.js 是一个轻量级、无依赖的原生JavaScript引擎，在整个页面中驱动用户的注意力，强大的、高度可定制的原生JavaScript引擎，无外部依赖，支持所有主流浏览器，这篇文章主要介绍了vue如何使用driver.js实现项目功能向导指引,需要的朋友可以参考下
2023-03-03
Vue中进行路由懒加载的示例详解
路由懒加载是一种优化Vue应用程序性能的技术，本文介绍了Vue中如何进行路由懒加载，包括使用Vue异步组件和Webpack代码分割,需要的朋友可以参考下
2023-06-06
一文带你了解Vue 和 React的区别
这篇文章主要介绍了Vue和React的区别，毕竟是两个框架，不像两个 API，要说细节上的区别就太多太多了，本文就简单的带大家说说Vue 和 React 的区别,需要的朋友可以参考下
2023-05-05
vue、react等单页面项目部署到服务器的方法及vue和react的区别
这篇文章主要介绍了vue、react等单页面项目部署到服务器的方法,需要的朋友可以参考下
2018-09-09
vue+element-ui中form输入框无法输入问题的解决方法
很多初次接触element-ui的同学,在用到element form组件时可能会遇到input框无法输入文字的问题,下面这篇文章主要给大家介绍了关于vue+element-ui中form输入框无法输入问题的解决方法,需要的朋友可以参考下
2023-04-04
Vue组件通信深入分析
对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结
2022-08-08