Vue 动态加载组件
为什么要动态加载呢?而不是一次性加载呢?
一次性?你能保证你拿的内容不多,那从性能方面说还是OK的。否则,就该什么时候用,就什么时候取。
得出这想法,源于前几天上班赶产品的故事:
A组件是父亲,B组件是A组件的孩子。刚刚,我在A组件里直接加载B组件。 编译居然用了将近一分半钟,我都还没加其他C孩子,D孩子呢。
现在,我在A组件里动态加载B组件,也就是点击工作配置单才加载B组件,居然十秒左右,惊呆了。
下面看看动态加载的方法:
A组件的 Template标签:由于我的动态加载的组件不唯一,所以弄了个变量。中途改名,我就可以加载别的组件了。这里v-if为false说明,不编译,等到true才开始局部编译该组件。
<component :is="workSheetComponent" v-if="false" ></component>
A组件的 Script Data :给个默认值,说明不改组件名,那就加这个组件。这里组件名字跟下面组件注册是对应的。
动态加载组件的注册方式:
components: {
WorkOrderConfig: resolve => require([path参数], resolve),
}
当然动态加载方法还有好几种。
Vue 动态加载组件的更多相关文章
- vue动态加载组件
vue动态加载组件,可以使用以下方式 <component :is="propertyname" v-for="tab in tabs"></ ...
- VUE 动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
- vue实践---vue动态加载组件
开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些 ...
- vue -- 动态加载组件 (tap 栏效果)
在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使 ...
- Vue加载组件、动态加载组件的几种方式
https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...
- vue中动态加载组件+开发者模式+JS参数值传递和引用传递
今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- React router动态加载组件-适配器模式的应用
前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...
- C# 动态加载组件后怎么在开发环境中调试
动态加载组件 那就是简单的Assembly.Load动态加载dll而以.这网上资料也有不少.基本的思路基本上就是在本地上一个指定目录如[plugs]存在着一堆dll文件.主程序在初始运行时一般会把指定 ...
随机推荐
- CentOS7 启动中文输入法
CentOS 系统中是带有中文输入法的(智能拼音),启动方式如下: Applications --> System Tools --> Setting --> Region &am ...
- idea执行mapreduce报错 Could not locate Hadoop executable: C:\hadoop-3.1.1\bin\winutils.exe
window执行mapreduce报错 Exception in thread "main" java.lang.RuntimeException: java.io.FileNot ...
- pycharm 如何进行全部搜索
界面里面先按ctrl F 弹出搜索页面 在搜索框内连续按两次shift shift可以搜索全文
- Android系统的镜像文件的打包过程
在前面一篇文章中,我们分析了Android模块的编译过程.当Android系统的所有模块都编译好之后,我们就可以对编译出来的模块文件进行打包了.打包结果是获得一系列的镜像文件,例如system.img ...
- http错误代码提示
1×× 保留 2×× 表示请求成功地接收 3×× 为完成请求客户需进一步细化请求 4×× 客户错误 5×× 服务器错误 200 正常:请求已完成. 201 正常:紧接 POST 命令. 202 ...
- 源码分析MySQL mysql_real_query函数
目录 目录 1 1. 前言 1 2. 调用路径 2 3. MAX_PACKET_LENGTH宏 2 4. DBUG_RETURN宏 3 5. COM_QUERY枚举值 3 6. mysql_query ...
- Winform嵌入CEF(非正常用法)
(一)复制下面必备文件|-- locales|--en-US.pak|--cef.pak|--cef_100_percent.pak |--cef_200_percent.pak|--cef_exte ...
- 3 week work—Grid Layout
HTML: <div class="wrapper"> //建立一个三列轨道网格. <div class="one">One</d ...
- Linux下解压.tar.xz格式文件的方法
前言 对于xz这个压缩相信很多人陌生,但xz是绝大数linux默认就带的一个压缩工具,xz格式比7z还要小. 今天在下载Node.js源码包的时候遇到的这种压缩格式.查了一下资料,这里进行一下记录,分 ...
- Linux - 多窗口管理器Screen程序
GNU's Screen homepage Screen是由GNU计划开发的用于命令行终端切换的自由软件,可以看作是窗口管理器的命令行界面版本. 可以通过该软件同时连接多个本地或远程的命令行会话,并在 ...