详解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 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
js获取ip和地区
Mar 10 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
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
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php使用codebase生成随机数
2014/03/25 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
PHP实现文件下载详解
2014/11/27 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
python随机模块random使用方法详解
2020/02/14 Python
python中安装django模块的方法
2020/03/12 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
python二维图制作的实例代码
2020/12/03 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
市场部规章制度
2014/01/24 职场文书
说明书怎么写
2014/05/06 职场文书
舞蹈专业求职信
2014/06/13 职场文书
工会工作个人总结
2015/03/03 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
Nginx的基本概念和原理
2022/03/21 Servers
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers