Vue加载组件、动态加载组件的几种方式


Posted in Javascript onAugust 31, 2018

什么是组件:

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。

下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示:

//正常加载
import index from '../pages/index.vue'
import view from '../pages/view.vue'
//懒加载
const index = resolve => require(['../pages/index.vue'], resolve)
const view = resolve => require(['../pages/view.vue'], resolve)
//懒加载 - 按组
const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')
const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')
// 懒加载 - 按组 import,基于ES6 import的特性
const index = () => import('../pages/index.vue')
const view = () => import('../pages/view.vue')

补充:Vue动态加载组件的四种方式

动态加载组件的四种方式:

1、使用import导入组件,可以获取到组件

var name = 'system';
var myComponent =() => import('../components/' + name + '.vue');
var route={
  name:name,
  component:myComponent
}

2、使用import导入组件,直接将组件赋值给componet

var name = 'system';
var route={
  name:name,
  component :() => import('../components/' + name + '.vue');
}

3、使用require 导入组件,可以获取到组件

var name = 'system';
var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
var route={
  name:name,
  component:myComponent
}

4、使用require 导入组件,直接将组件赋值给componet

var name = 'system';
var route={
  name:name,
  component(resolve) {
    require(['../components/' + name + '.vue'], resolve)
  }
}

总结

以上所述是小编给大家介绍的Vue加载组件、动态加载组件的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 学习笔记(十五)
Jan 28 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
js 金额文本框实现代码
Feb 14 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 #Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 #Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 #Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 #Javascript
JS实现字符串翻转的方法分析
Aug 31 #Javascript
angular实现input输入监听的示例
Aug 31 #Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
js选项卡的实现方法
2015/02/09 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python扫描线填充算法详解
2020/02/19 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
社区学习十八大感想
2014/01/22 职场文书
爱心助学感谢信
2015/01/21 职场文书
内乡县衙导游词
2015/02/05 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
大国崛起英国观后感
2015/06/02 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python