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 建设银行登陆键盘
Jun 10 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
javascript两段代码,两个小技巧
2010/02/04 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
详解javascript高级定时器
2015/12/31 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python实现识别手写数字大纲
2018/01/29 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
浅析Python函数式编程
2018/10/06 Python
学习python分支结构
2019/05/17 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
药学专业毕业生求职信
2013/10/20 职场文书
装饰活动策划方案
2014/02/11 职场文书
化工厂员工工作总结
2015/10/15 职场文书
转变工作作风心得体会
2016/01/23 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android