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


Posted in Javascript onMay 30, 2019

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

Javascript 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
微信小程序动态添加view组件的实例代码
May 23 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
Vue使用axios出现options请求方法
May 30 #Javascript
vue动态注册组件实例代码详解
May 30 #Javascript
实用的Vue开发技巧
May 30 #Javascript
vue-router的两种模式的区别
May 30 #Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 #Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 #Javascript
全面分析JavaScript 继承
May 30 #Javascript
You might like
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
2016/10/09 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
vue2.0安装style/css loader的方法
2018/03/14 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python入门篇之正则表达式
2014/10/20 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
实习教师个人的自我评价
2013/11/08 职场文书
企业车辆管理制度
2014/01/24 职场文书
后备干部培训方案
2014/05/22 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
战略合作意向书
2014/07/29 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers