详解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 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
JavaScript中Require调用js的实例分享
Oct 27 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
js不常见操作运算符总结
Nov 20 Javascript
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
fgetcvs在linux的问题
2012/01/15 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
python根据出生年份简单计算生肖的方法
2015/03/27 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python random模块的使用示例
2020/10/10 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
民间借贷借条范本
2015/05/25 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
python字符串常规操作大全
2021/05/02 Python
在js中修改html body的样式
2021/11/11 Javascript