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 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 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缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
初学Python实用技巧两则
2014/08/29 Python
python实现矩阵乘法的方法
2015/06/28 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
机关会计岗位职责
2014/04/08 职场文书
建筑工地质量标语
2014/06/12 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
无违反计划生育证明格式
2015/06/24 职场文书