Vue加载组件、动态加载组件的几种方式
https://cn.vuejs.org/v2/guide/components.html
https://cn.vuejs.org/v2/guide/components-dynamic-async.html
上述内容可以通过 Vue 的 <component>
元素加一个特殊的 is
特性来实现:
<!-- 组件会在 `currentTabComponent` 改变时改变 --> |
在上述示例中,currentTabComponent
可以包括
- 已注册组件的名字,或
- 一个组件的选项对象
你可以在这里查阅并体验完整的代码,或在这个版本了解绑定组件选项对象,而不是已注册组件名的示例。
到目前为止,关于动态组件你需要了解的大概就这些了,如果你阅读完本页内容并掌握了它的内容,我们会推荐你再回来把动态和异步组件读完。
什么是组件:
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。
下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示:
1
2
3
4
5
6
7
8
9
10
11
12
|
//正常加载 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导入组件,可以获取到组件
1
2
3
4
5
6
|
var name = 'system' ; var myComponent =() => import( '../components/' + name + '.vue' ); var route={ name:name, component:myComponent } |
2、使用import导入组件,直接将组件赋值给componet
1
2
3
4
5
|
var name = 'system' ; var route={ name:name, component :() => import( '../components/' + name + '.vue' ); } |
3、使用require 导入组件,可以获取到组件
1
2
3
4
5
6
|
var name = 'system' ; var myComponent = resolve => require.ensure([], () => resolve(require( '../components/' + name + '.vue' ))); var route={ name:name, component:myComponent } |
4、使用require 导入组件,直接将组件赋值给componet
1
2
3
4
5
6
7
|
var name = 'system' ; var route={ name:name, component(resolve) { require([ '../components/' + name + '.vue' ], resolve) } } |
JavaScript 箭头函数(Lambda表达式)
简介
JavaScript 中,函数可以用箭头语法(”=>”)定义,有时候也叫“lambda表达式”。这种语法主要意图是定义轻量级的内联回调函数。例如:
// Arrow function:
[5, 8, 9].map(item => item + 1); // -> [6, 9, 10]
// Classic function equivalent:
[5, 8, 9].map(function(item) {
return item + 1;
}); // -> [6, 9, 10]
当箭头函数有一个参数时,参数两边的括号是可有可无的,但是还是有括号看起来看清楚。
const foo = bar => bar + 1;
const bar = (baz) => baz + 1;
- 1
- 2
箭头函数不带参数时,必须要用括号,比如:
const foo = () => "foo";
- 1
如果函数体不是只一行,应该用花括号,并显式地返回(如果需要返回值)。
const foo = bar => {
const baz = 5;
return bar + baz;
};
foo(1); // -> 6
- 1
- 2
- 3
- 4
- 5
arguments object
箭头函数不会暴露 argument 对象,所以,argument 将简单地指向当前scope内的一个变量。
arguments object 是所有函数中的一个本地变量。你可以通过 arguments 对象引用函数的入参。这个对象包含传给这个函数的每个入参的入口,索引从0开始,例如:
arguments[0]
arguments[1]
arguments[2]
const arguments = [true];
const foo = x => console.log(arguments[0]);
foo(false); // -> true
- 1
- 2
- 3
- 4
基于此,箭头函数也不知道它的调用者。
当缺少arguments object时,可能会有所限制(极少数情况),其余的参数一般可以做为替代。
const arguments = [true];
const foo = (...arguments) => console.log(arguments[0]);
foo(false); // -> false
- 1
- 2
- 3
- 4
绑定this的值
箭头函数是 lexically scoped,这意味着其 this 绑定到了附近scope的上下文。也就是说,不管this指向什么,都可以用一个箭头函数保存。
看下面的例子, Cow 类有一个方法在1秒后输出sound。
class Cow {
constructor() {
this.sound = "moo";
}
makeSoundLater() {
setTimeout(() => {
console.log(this.sound);
}, 1000);
}
}
var myCow = new Cow();
var yourCow = new Cow();
yourCow.sound = "moooooo";
myCow.makeSoundLater();
yourCow.makeSoundLater();
在 makeSoundLater() 方法中,this 指向当前 Cow 对象的实例。所以在这个例子中当我们调用 myCow.makeSoundLater(), this 指向 myCow。然后,通过使用箭头函数,我们保存了 this,这样我们就可以在需要时引用 this.sound 了。将会输出 “moo”,而不是yourCow.makeSoundLater()输出的“moooooo”。
隐式返回值
箭头函数可以通过省略掉小括号做到隐式返回值。
const foo = x => x + 1;
foo(1); // -> 2
- 1
- 2
当使用隐式返回时,Object Literal 必须用花括号括起来。
Object Literal 是用花括号括起来的,分号隔开的 k-v 对象列表。
const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}
- 1
- 2
显示返回值
const foo = x => {
return x + 1;
}
foo(1); // -> 2
- 1
- 2
- 3
- 4
- 5
语法
x => y // Implicit return
x => { return y } // Explicit return
(x, y, z) => { ... } // Multiple arguments
(() => { ... })() // Immediately-invoked function expression
Vue加载组件、动态加载组件的几种方式的更多相关文章
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- 动态库DLL加载方式-静态加载和动态加载
静态加载: 如果你有a.dll和a.lib,两个文件都有的话可以用静态加载的方式: message函数的声明你应该知道吧,把它的声明和下面的语句写到一个头文件中 #pragma comment(lib ...
- JAVA反射机制--静态加载与动态加载
Java反射是Java被视为动态(或准动态)语言的一个关键性质.这个机制允许程序在运行时透过Reflection APIs取得任何一个已知名称的class的内部信息,包括其modifiers(诸如pu ...
- 转载:Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式
Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式 出自:http://www.cnblogs.com/top5/archive/2012/08/04/2623464.html 关 ...
- 于Unity3D动态创建对象和创建Prefab三种方式的原型对象
于Unity3D动态创建对象和创建Prefab三种方式的原型对象 u3d在动态创建的对象,需要使用prefab 和创建时 MonoBehaviour.Instantiate( GameObject o ...
- EasyUI的treegrid组件动态加载数据问题的解决办法
http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...
- React 性能优化之组件动态加载(react-loadable)
React 项目打包时,如果不进行异步组件的处理,那么所有页面所需要的 js 都在同一文件中(bundle.js),整个js文件很大,从而导致首屏加载时间过长. 所有,可以对组件进行异步加载处理,通常 ...
- vue问题八:动态加载loading、浏览器图标
全局动态加载loading: 参考文档:https://blog.csdn.net/qq_34825875/article/details/79570301 在main.js或者index.js引用 ...
- vue-router实现路由懒加载( 动态加载路由 )
三种方式第一种:vue异步组件技术 ==== 异步加载,vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件.第二种:路由懒加载 ...
- 使用js加载器动态加载外部js、css文件
let MiniSite = new Object(); /** * 判断浏览器 */ MiniSite.Browser = { ie: /msie/.test(window.navigator.us ...
随机推荐
- 【图的遍历】广度优先遍历(DFS)、深度优先遍历(BFS)及其应用
无向图满足约束条件的路径 •[目的]:掌握深度优先遍历算法在求解图路径搜索问题的应用 [内容]:编写一个程序,设计相关算法,从无向图G中找出满足如下条件的所有路径: (1)给定起点u和终点v. ( ...
- [转] Web MVC简介
http://blog.csdn.net/zk_software/article/details/8141843
- sed & awk常用正则表达式
正则表达式元字符 正则表达式中有两种基本元素: 以字面值或变量表示的值(如.代表任意单个字符). 操作符(如*代表将前面的字符重复任意次). 元字符汇总 特殊字符 用途 . 匹配除换行符以外的任意单个 ...
- L3-016 二叉搜索树的结构 (30 分) 二叉树
二叉搜索树或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值:若它的右子树不空,则右子树上所有结点的值均大于它的根结点的值:它的左.右子树也分别 ...
- python中执行shell的两种方法总结
这篇文章主要介绍了python中执行shell的两种方法,有两种方法可以在Python中执行SHELL程序,方法一是使用Python的commands包,方法二则是使用subprocess包,这两个包 ...
- hdu 3065 病毒侵袭持续中【AC自动机】
<题目链接> 题目大意: 小t非常感谢大家帮忙解决了他的上一个问题.然而病毒侵袭持续中.在小t的不懈努力下,他发现了网路中的“万恶之源”.这是一个庞大的病毒网站,他有着好多好多的病毒,但是 ...
- 使用MSF发现主机和端口扫描
使用MSF发现主机和端口扫描 使用search命令查找需要的模块 MSF模块太多,记不住怎么办!!! 我们不需要记住所有模块,我们只要能找到我们想用的模块就行,平时积累使用的模块也行哦! 比如,我们通 ...
- 用Python破解斗地主残局
相信大家都玩过斗地主,规则就不再介绍了. 直接上一张朋友圈看到的残局图: 这道题我刚看到时,曾尝试用手工来破解,每次都以为找到了农民的必胜策略时,最后都发现其实农民跑不掉.由于手工破解无法穷尽所有可能 ...
- 50 tips of JavaScript,这些坑你都知道吗?
1.在局部作用域中,使用var操作符定义的变量将成为定义该变量的作用域中的局部变量,省略var的会创建全局变量:在全局作用域中,不管是否使用var操作符定义的变量都会创建一个全局变量.但是,在全局作用 ...
- 5288: [Hnoi2018]游戏
5288: [Hnoi2018]游戏 链接 分析: 考虑y<=x的怎么做,那么只能从左边走到右边.我们可以从最右边的点开始,一次确定每个点往右边可以走多少. L[x],R[x]分别是x向左向右最 ...