详解vue 动态加载并注册组件且通过 render动态创建该组件
2019-05-30 10:34
2516 查看
基于 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中父子组件通过props传递数据,页面加载完毕,父组件数据更新,子组件不动态更新的解决方案
- vue动态注册组件实例代码详解
- FLEX如何动态创建DataGrid组件详解
- 通过Activity动态加载Fragment创建主界面构架
- Vue加载组件、动态加载组件的几种方式
- QML 组件与对象动态创建详解
- 详解Vue 动态组件与全局事件绑定总结
- 详解vue组件的is特性:限制元素&动态组件
- vue.js组件的全局注册和局部注册详解
- Vue 组件注册实例详解
- C#动态加载组件后如何在开发环境中调试详解
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
- angular,vue,react的基本语法—动态属性、事件绑定、ref,angular组件创建方式
- Android 通过Java代码生成创建界面。动态生成View,动态设置View属性。addRules详解
- Swift微博项目--Swift中通过类名字符串创建类以及动态加载控制器的实现
- iOS开发——UI进阶篇(八)pickerView简单使用,通过storyboard加载控制器,注册界面,通过xib创建控制器,控制器的view创建,导航控制器的基本使用
- Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
- 通过npm引用的vue组件使用详解
- 通过字符串调用方法得到结果及动态创建Swing组件和布局