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 相关文章推荐
DIV菜单层实现代码
Nov 19 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
详解javascript replace高级用法
Feb 17 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
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
Prototype使用指南之base.js
2007/01/10 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
python动态加载包的方法小结
2016/04/18 Python
Django自定义分页效果
2017/06/27 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
python 画图 图例自由定义方式
2020/04/17 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
什么是serialVersionUID
2016/03/04 面试题
世界地球日活动总结
2015/02/09 职场文书
酒店员工手册范本
2015/05/14 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
vue实现拖拽交换位置
2022/04/07 Vue.js