Tag站长知识库:分享、传递知识使我们更快乐,更幸福,更和谐!

最近更新热门图文热门文章全站推荐Tag标签网站地图
您现在的位置:首页 > 网页制作 > JavaScript>>Vue加载组件、动态加载组件的几种方式

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

2019-06-17 17:21作者:佚名来源:脚本之家浏览:311 评论:311

什么是组件:

组件是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加载组件、动态加载组件的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对tag知识库网站的支持!

Tags: vue 加载 组件 责任编辑:Tag站长知识库
顶一下(311)
87.08%

精彩信息

     

精彩信息

     

精彩信息