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
