06 通過 directive 增強組件內容
目標
之前的五篇文章中，switch 組件一直是被視爲內部組件存在的，細心的讀者應該會發現，這個組件除了幫我們提供開關的交互以外，還會根據當前 toggle 的開關狀態，爲 button 元素增加 aria-expanded 屬性，以 aira 開頭的屬性叫作內容增強屬性，它用於描述當前元素的某種特殊狀態，幫助殘障人士更好地瀏覽網站內容。
但是，作爲組件調用者，未必會對使用這種相關屬性對網站內容進行增強，那麼如何更好地解決這個問題呢？答案就是使用 directive。
我們期望能夠顯示地聲明當前的元素是一個 toggler 職能的組件或者元素，這個組件或者元素，可以根據當前 toggle 組件的開關狀態，動態地更新它本身的 aria-expanded 屬性，以便針對無障礙訪問提供適配。
實現
簡單實現
首先創建一個 toggler 指令函數，如下：
export default function(el, binding, vnode) {
const on = binding.value
if (on) {
el.setAttribute(`aria-expanded`, true);
} else {
el.removeAttribute(`aria-expanded`, false);
}
}這個指令函數很簡單，就是通過傳入指令的表達式的值來判定，是否在當前元素上增加一個 aria-expanded 屬性。之後再 app 引入該指令，如下：
directives: {
toggler
}之後就可以在 app 組件的模板中使用該指令了，比如：
<custom-button v-toggler="status.on" ref="customButton" :on="status.on" :toggle="toggle"></custom-button>一切都將按預期中運行，當 toggle 組件的狀態爲開時，custom-button 組件的根元素會增加一個 aria-expanded="true" 的內容增強屬性。
Note: 這裏關於指令的引入，使用的函數簡寫的方式，會在指令的 bind 和 update 鉤子函數中觸發相同的邏輯，vue 中的指令包含 5 個不同的鉤子函數，這裏就不贅述了，不熟悉的讀者可以通過閱讀官方文檔來了解。
注入當前組件實例
上文中的指令會通過 binding.value 來獲取 toggle 組件的開關狀態，這樣雖然可行，但在使用該指令時，custom-button 本身的 prop 屬性 on 已經代表了當前的開關狀態，能否直接在指令中獲取當前所綁定的組件實例呢？答案是可以的。指令函數的第三個參數即爲當前所綁定組件的虛擬 dom 節點實例，其 componentInstance 屬性指向當前組件實例，所以可以將之前的指令改版如下：
export default function(el, binding, vnode) {
const comp = vnode.componentInstance;
const on = binding.value || comp.on;
if (on) {
el.setAttribute(`aria-expanded`, true);
} else {
el.removeAttribute(`aria-expanded`, false);
}
}這樣，即使不向指令傳入表達式，它也可以自動去注入當前修飾組件所擁有的 prop 屬性 on 的值，如下:
<custom-button v-toggler ref="customButton" :on="status.on" :toggle="toggle"></custom-button>提供更多靈活性
指令函數的第二個參數除了可以獲取傳入指令內部的表達式的值以外，還有其他若干屬性，比如 name、arg、modifiers等，詳細說明可以去參考官方文檔。
爲了儘可能地使指令保證靈活性，我們期望可以自定義無障礙屬性 aria 的後綴名稱，比如叫做 aria-on，這裏我們可以通過 arg 這個參數輕鬆實現，改版如下：
export default function(el, binding, vnode) {
const comp = vnode.componentInstance;
const suffix = binding.arg || "expanded";
const on = binding.value || comp.on;
if (on) {
el.setAttribute(`aria-${suffix}`, true);
} else {
el.removeAttribute(`aria-${suffix}`, false);
}
}可以發現，這裏通過 binding.arg 來獲取無障礙屬性的後綴名稱，並當沒有傳遞該參數時，降級至 expanded。這裏僅僅是爲了演示，讀者有興趣的話，還可以利用 binding 對象的其他屬性提供更多的靈活性。
成果
最終的運行結果就不用語言描述了，直接截了一個圖，是 toggle 組件開關狀態爲開時的截圖:
你可以下面的鏈接來看看這個組件的實現代碼以及演示：
總結
關於指令的概念，我自身還是在 angularjs(v1.2以下版本) 中第一次接觸，當時其實不興組件化開發這個概念，指令本身的設計理念也是基於增強這個概念的，即增強某個 html 標籤。到後來興起了組件化開發的開發思想，指令似乎是隨着 angularjs 的沒落而消失了蹤影。
但仔細想想的話，web 開發流程中，並不是所有的場景都可以拿組件來抽象和描述的，比如說，你想提供一個類似高亮邊框的公用功能，到底如何來按組件化的思想抽象它呢？這時候使用指令往往是一個很好的切入點。
因此，當你面臨解決的問題，顆粒度小於組件化抽象的粒度，同時又具備複用性，那就大膽的使用指令來解決它吧。