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

什么是组件:

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

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

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导入组件,可以获取到组件

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

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

import('../components/' + name + '.vue'); }

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

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

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

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

总结

以上所述是小编给大家介绍的Vue加载组件、动态加载组件的几种方式。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...