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