列完大綱，這篇還在寫，晚點再來看吧。

組件(component)間的其他連結

Vue.js 14、Vue.js 15 兩篇分別介紹組件內外資料交換的標準途徑，其實組件間還存在其他連結，各有其用途。某些情況甚至可以當成直接溝通途徑，接下來一一介紹。

$parent/$children/$root

第一個直接連結是父子組件間的交互參照

• 父組件可透過$children直接存取其下一層的子組件。
• 子組件可透過$parent直接存取其上一層的父組件。
• 不論父子組件都可透過$root，直接存取最頂層的Vue Instance。

能存取別的組件、Vue Instance，你就能使用它的屬性/方法。

ref屬性 & $refs

第二個直接連結是組件的自訂索引名 - ref，用於父組件對子組件的參照。

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

定義好的索引名，可以透過父組件的$refs取得

var parent = new Vue({ el: '#parent' })
/* 存取子組件 */
var child = parent.$refs.profile

若是搭配v-for，$refs對應的索引名也會取得陣列/JSON

<div id="parent">
  <user-profile v-for="user in users" ref="profile"></user-profile>
</div>

typeof parent.$refs.profile /* Array */

這個屬性在畫面渲染完才會更新，資料可能不同步，只適合當備用方案。

[1.x] v-el & $els

第三個直接連結是DOM的自訂索引名。

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>

this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"

相當於你選取特定id的DOM，可直接操作DOM物件。

跟data-driven概念背離，2.x被拿掉。

特殊情境

非同步組件

用於動態載入組件定義、延後組件註冊。

遞迴組件

跟遞迴函數的概念一樣，重複利用組件。

需要在組件定義中加上name

{
    components: {
        name: 'unique-name-of-my-component',
        /* template...and else */
    }
}

Vue.component('unique-name-of-my-component', {
  /* 全域註冊會自動補上 name: 'unique-name-of-my-component' */
})

補上name只是讓Vue允許你在<template>內使用
既然是遞迴，少了終止條件免不了炸掉堆疊，記得補上。

{
    name: 'stack-overflow',
    template: '<div><stack-overflow v-if="isEnd"></stack-overflow></div>',
    computed: {
        isEnd: function() {
            return /* 你的終止條件 */;
        }
    }
}

加速組件編譯

• v-once
  一次性編譯，用於不會改變的靜態資料
• v-pre
  跳過不編譯，用於不會改變的靜態樣板