高階 vue 元件模式 6

之前的五篇文章中，switch元件一直是被視為內部元件存在的，細心的讀者應該會發現，這個元件除了幫我們提供開關的互動以外，還會根據當前toggle的開關狀態，為button元素增加aria-expanded屬性，以aira開頭的屬性叫作內容增強屬性，它用於描述當前元素的某種特殊狀態，幫助殘障人士更好地瀏覽**內容。

我們期望能夠顯示地宣告當前的元素是乙個toggler職能的元件或者元素，這個元件或者元素，可以根據當前toggle元件的開關狀態，動態地更新它本身的aria-expanded屬性，以便針對無障礙訪問提供適配。

簡單實現

首先建立乙個 toggler 指令函式，如下：

export default function(el, binding, vnode)  else 
}複製**

directives:

複製**

"status.on" ref="custombutton" :on="status.on" :toggle="toggle">
複製**

一切都將按預期中執行，當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)  else 
}複製**

這樣，即使不向指令傳入表示式，它也可以自動去注入當前修飾元件所擁有的 prop 屬性 on 的值，如下:

"custombutton" :on="status.on" :toggle="toggle">
複製**

提供更多靈活性

指令函式的第二個引數除了可以獲取傳入指令內部的表示式的值以外，還有其他若干屬性，比如 name、arg、modifiers等，詳細說明可以去參考官方文件。

為了盡可能地使指令保證靈活性，我們期望可以自定義無障礙屬性 aria 的字尾名稱，比如叫做aria-on，這裡我們可以通過 arg 這個引數輕鬆實現，改版如下：

export default function(el, binding, vnode) `, true);
} else `, false);
}}複製**

可以發現，這裡通過binding.arg來獲取無障礙屬性的字尾名稱，並當沒有傳遞該引數時，降級至expanded。這裡僅僅是為了演示，讀者有興趣的話，還可以利用 binding 物件的其他屬性提供更多的靈活性。

最終的執行結果就不用語言描述了，直接截了乙個圖，是 toggle 元件開關狀態為開時的截圖:

github: part-6

關於指令的概念，我自身還是在 angularjs(v1.2以下版本) 中第一次接觸，當時其實不興元件化開發這個概念，指令本身的設計理念也是基於增強這個概念的，即增強某個 html 標籤。到後來興起了元件化開發的開發思想，指令似乎是隨著 angularjs 的沒落而消失了蹤影。

但仔細想想的話，web 開發流程中，並不是所有的場景都可以拿元件來抽象和描述的，比如說，你想提供乙個類似高亮邊框的公用功能，到底如何來按元件化的思想抽象它呢？這時候使用指令往往是乙個很好的切入點。

因此，當你面臨解決的問題，顆粒度小於元件化抽象的粒度，同時又具備復用性，那就大膽的使用指令來解決它吧。

github gist

高階 vue 元件模式 6

高階 Vue 元件模式 3

高階 Vue 元件模式 1

高階 Vue 元件模式 2

高階 vue 元件模式 6

高階 Vue 元件模式 3

高階 Vue 元件模式 1

高階 Vue 元件模式 2

相關推薦