高級 Vue 組件模式 (6)

makeFoxPlay 發布于2019-08-23 12:28 / 2762人閱讀

摘要：之后再引入該指令，如下之后就可以在組件的模板中使用該指令了，比如一切都將按預期中運行，當組件的狀態為開時，組件的根元素會增加一個的內容增強屬性。到后來興起了組件化開發的開發思想，指令似乎是隨著的沒落而消失了蹤影。

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 組件的模板中使用該指令了，比如：

一切都將按預期中運行，當 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 的值，如下:

提供更多靈活性

指令函數的第二個參數除了可以獲取傳入指令內部的表達式的值以外，還有其他若干屬性，比如 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 組件開關狀態為開時的截圖:

你可以下面的鏈接來看看這個組件的實現代碼以及演示：

sandbox: 在線演示

github: part-6

總結

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

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

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

github gist

關注公眾號 全棧101，只談技術，不談人生

云服務器 GPU云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98558.html

高級 Vue 組件模式 (1)

摘要：寫在前頭去年，曾經閱讀過一系列關于高級組件模式的文章，今年上半年，又抽空陸陸續續地翻譯了一系列關于高級組件模式的文章，碰巧最近接手了一個公司項目，前端這塊的技術棧是。同時這個組件還擁有一個屬性，用來初始化的狀態值。寫在前頭去年，曾經閱讀過一系列關于高級 react 組件模式的文章，今年上半年，又抽空陸陸續續地翻譯了一系列關于高級 angular 組件模式的文章，碰巧最近接手了一個公...

lanffy 2019-08-23 12:26 評論0 收藏0
vue-router 一些容易被忽略的知識點

摘要：調用全局的守衛。在被激活的組件里調用。用創建好的實例調用守衛中傳給的回調函數。本文適用于對 Vue.js 和 vue-router 有一定程度了解的開發者除特殊說明，vue-router 版本為 3.0.2 正文路由 class 匹配路由匹配后會給該標簽添加 class 屬性值 .router-link-active，該功能在嵌套路由中十分方便 class 的實際屬性值可以通...

chunquedong 2019-08-23 14:58 評論0 收藏0
高級 Vue 組件模式 (3)

摘要：在中，我們是否也有一些手段或特性來提高組件的復用程度和靈活性呢答案當然是有的，那就是。成果通過實現，我們成功將注入的邏輯抽離了出來，這樣每次需要共享組件的狀態和方法時，混入該即可。 03 使用 mixin 來增強 Vue 組件目標之前一篇文章中，我們雖然將 toggle 組件劃分為了 toggle-button、toggle-on 和 toggle-off 三個子組件，且一切運行良...

iKcamp 2019-08-23 12:26 評論0 收藏0
高級 Vue 組件模式 (2)

摘要：編寫復合組件目標我們需要實現的需求是能夠使使用者通過組件動態地改變包含在它內部的內容。成果通過復合組件的方式，我們將組件劃分為了三個更小的職責更加單一的子組件。 02 編寫復合組件目標我們需要實現的需求是能夠使使用者通過組件動態地改變包含在它內部的內容。熟悉 vue 的童鞋可能馬上會想到不同的解決方案，比如使用 slot 并配合 v-if，我們這里采用另外一種方法，利用 vu...

Galence 2019-08-23 12:26 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

pumpkin9 2019-08-23 17:12 評論0 收藏0