https://cn.vuejs.org/v2/guide/components.html

https://cn.vuejs.org/v2/guide/components-dynamic-async.html

上述內容可以通過 Vue 的 <component> 元素加一個特殊的 is 特性來實現：

<!-- 元件會在 `currentTabComponent` 改變時改變 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括

• 已註冊元件的名字，或
• 一個元件的選項物件

你可以在這裡查閱並體驗完整的程式碼，或在這個版本瞭解繫結元件選項物件，而不是已註冊元件名的示例。

到目前為止，關於動態元件你需要了解的大概就這些了，如果你閱讀完本頁內容並掌握了它的內容，我們會推薦你再回來把動態和非同步元件讀完。

什麼是元件：

元件是Vue.js最強大的功能之一。元件可以擴充套件HTML元素，封裝可重用的程式碼。在較高層面上，元件是自定義的元素，Vue.js的編譯器為它新增特殊功能。在有些情況下，元件也可以是原生HTML元素的形式，以is特性擴充套件。

下面一段簡單的程式碼給大家介紹Vue載入元件的幾種方式，具體程式碼如下所示：

補充：Vue動態載入元件的四種方式

動態載入元件的四種方式：

1、使用import匯入元件，可以獲取到元件

2、使用import匯入元件，直接將元件賦值給componet

3、使用require 匯入元件，可以獲取到元件

4、使用require 匯入元件，直接將元件賦值給componet

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