详解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动态创建该组件,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue加载组件、动态加载组件的几种方式

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示: //正常加载 import index from '../pages/index.vue' import view from '../pages/view.vue' //懒加载 const i

  • vue 页面加载进度条组件实例

    页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验 但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度也无法统计.另外,我们不可能监控到所有资源的加载情况. 事实上,用户并不是在乎你的页面究竟加载了百分之几,而真正关心的是离加载完还有多久,以及这个空白页面是没有加载完,还是加载完就是空白的.所以没我们需要去"模拟"

  • Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

  • 解析vue路由异步组件和懒加载案例

    最近研究了vue性能优化,涉及到vue异步组件和懒加载.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 案例: 首先是组件,创建四个组件分别命名为first.second.three和four:内容如下 first <template> <div>我是第一个页面</div> </template> second <template> <div>我是第二个页面

  • vue实现图片加载完成前的loading组件方法

    如下所示: <template> <img :src="url"> </template> <script> export default { props: ['src'], // 父组件传过来所需的url data() { return { url: 'http://www.86y.org/images/loading.gif' // 先加载loading.gif } }, mounted() { var newImg = new Im

  • vue路由组件按需加载的几种方法小结

    1. 普通加载 使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题

  • 详解vue模拟加载更多功能（数据追加）

    详解vue模拟加载更多功能（数据追加）

    使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该使用concat()拼接两个数组. //这是错误的写法 $.ajax({ type:'get', async:false, url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2', dataType

  • 详解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" t

  • 详解Vue3如何加载动态菜单

    详解Vue3如何加载动态菜单

    目录 1. 整体思路 2. 实现细节 2.1 加载细节 2.2 getInfo 2.3 generateRoutes 1. 整体思路 首先我们来梳理下整体上的实现思路,首先一点:整体思路和 vhr 一模一样. 考虑到有的小伙伴可能已经忘记 vhr 中前端动态菜单的实现思路了,因此本文再和大家分析一下. 为了确保在所有的 .vue 文件中都能访问到到菜单数据,所以选择将菜单数据存入 vuex 中,vuex 是 vue 中一个存储数据的公共地方,所有的 .vue 文件都可以从 vuex 中读取到数据

  • 详解Spring ApplicationContext加载过程

    1.找准入口,使用ClassPathXmlApplicationContext的构造方法加载配置文件,用于加载classPath下的配置文件 //第一行,执行完成之后就完成了spring配置文件的加载,刷新spring上下文 ClassPathXmlApplicationContext context=new ClassPathXmlApplicationContext( "classpath:spring-mvc.xml"); //获取实例Bean Person person=con

  • 详解Qt如何加载libxl库

    详解Qt如何加载libxl库

    使用工具 1.Qt 5.12.3集成开发环境 2.libxl-3.9.4.3(官方下载地址:https://www.libxl.com/download.html) 提示:以下是本篇文章正文内容,下面案例可供参考 一.如何导入libxl库 由于官方给出的教程是MinGW32导入动态库我这边也照着导入libxl的32位动态库,使用MinGW64开发环境同理,如果qt使用的是mvsc环境的朋友可以不用参考此教程 1.pro文件导入静态链接库 1.把lib32.dll文件路径放入到pro文件中: LI

  • 详解Android Webview加载网页时发送HTTP头信息

    详解Android Webview加载网页时发送HTTP头信息 当你点击一个超链接进行跳转时,WebView会自动将当前地址作为Referer(引荐)发给服务器,因此很多服务器端程序通过是否包含referer来控制盗链,所以有些时候,直接输入一个网络地址,可能有问题,那么怎么解决盗链控制问题呢,其实在webview加载时加入一个referer就可以了,如何添加呢? 从Android 2.2 (也就是API 8)开始,WebView新增加了一个接口方法,就是为了便于我们加载网页时又想发送其他的HT

  • 详解JS异步加载的三种方式

    一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

  • 详解Android布局加载流程源码

    详解Android布局加载流程源码

    一.首先看布局层次 看这么几张图 我们会发现DecorView里面包裹的内容可能会随着不同的情况而变化,但是在Decor之前的层次关系都是固定的.即Activity包裹PhoneWindow,PhoneWindow包裹DecorView.接下来我们首先看一下三者分别是如何创建的. 二.Activity是如何创建的 首先看到入口类ActivityThread的performLaunchActivity方法: private Activity performLaunchActivity(Activi

  • Spring详解四种加载配置项的方法

    Spring详解四种加载配置项的方法

    目录 1.spring加载yml文件 2.spring 加载 properties 文件 3.spring加载系统磁盘(properties)文件 4.spring加载xml文件 5.Java基于InputStream读取properties配置文件 本文默认 spring 版本是 spring5 1 spring 加载 yml 文件 2 spring 加载 properties 文件 3 spring 加载 系统磁盘 文件 4 spring 加载 xml 文件 5 Java 基于 InputS

  • 详解react-router4 异步加载路由两种方法

    方法一:我们要借助bundle-loader来实现按需加载. 首先,新建一个bundle.js文件: import React, { Component } from 'react' export default class Bundle extends React.Component { state = { // short for "module" but that's a keyword in js, so "mod" mod: null } componen

随机推荐