很少有人最初編寫Vue組件時(shí)打算將其開源。我們大多數(shù)人都是從自己編寫組件開始的——我們有一個(gè)問題，然后決定通過構(gòu)建一個(gè)組件來解決它。有時(shí)我們發(fā)現(xiàn)自己想要在代碼庫的新位置解決相同的問題，因此我們使用組件并對(duì)其進(jìn)行重構(gòu)，使其可重用。然后我們想在一個(gè)不同的項(xiàng)目中使用它，所以我們把它轉(zhuǎn)移到一個(gè)獨(dú)立的包中。然后我們想“嘿，為什么不把這個(gè)分享給全世界呢?”于是我們開源了這個(gè)組件。

[[315736]]

一方面，這意味著對(duì)于任何在Vue工作的人來說，都可以獲得大量且不斷增長的開源組件，這很 piece。

另一方面，因?yàn)檫@些組件中的大多數(shù)是從特定的情況而來的，并且不是所有人都有跨多重環(huán)境重用組件的設(shè)計(jì)經(jīng)驗(yàn)，所以這些組件中的許多東西都不能很好地與Vue生態(tài)系統(tǒng)配合使用。

“很好”是什么意思?從高層次上講，這意味著行為表現(xiàn)對(duì)于Vue開發(fā)人員來說很自然，并且易于擴(kuò)展和集成到任何類型的應(yīng)用程序中。

在探索了廣泛的開源組件之后，下面幾點(diǎn)，我認(rèn)為下面是如何制作一個(gè)良好運(yùn)行的Vue組件方式：

• 實(shí)現(xiàn)v-model兼容性
• 事件透明化
• 為正確的元素分配屬性
• 接受瀏覽器的鍵盤導(dǎo)航規(guī)范
• 使用事件優(yōu)先于回調(diào)
• 限制組件樣式

實(shí)現(xiàn)`v-model`兼容性

對(duì)于表單字段的組件使其成為慣用的最重要方法之一就是要支持v-model。 根據(jù)官方文檔介紹，v-model本質(zhì)上就是語法糖，即利用v-model綁定數(shù)據(jù)后，其實(shí)就是既綁定了數(shù)據(jù)，又添加了一個(gè)input事件監(jiān)聽，如下：

自定義事件也可以用于創(chuàng)建支持 v-model 的自定義輸入組件。記?。?/p>

<input v-model="searchText"> 

等價(jià)于：

當(dāng)用在組件上時(shí)，v-model 則會(huì)這樣：

為了讓它正常工作，這個(gè)組件內(nèi)的 <input>必須：

• 將其 value attribute 綁定到一個(gè)名叫 value 的 prop 上
• 在其 input 事件被觸發(fā)時(shí)，將新的值通過自定義的 input 事件拋出

寫成代碼之后是這樣的：

現(xiàn)在 v-model 就應(yīng)該可以在這個(gè)組件上完美地工作起來了：

<custom-input v-model="searchText"></custom-input> 

事件透明化

為了實(shí)現(xiàn)v-model，組件需要實(shí)現(xiàn)input事件。但其他事件呢?比如點(diǎn)擊事件，鍵盤處理等等?雖然原生事件以 HTML 的形式冒泡，但是 Vue 的事件處理在默認(rèn)情況下并不冒泡。

例如，除非我做一些具體的事情，否則這是行不通的

<my-textarea-wrapper @focus="showFocus"> 

除非我們?cè)诎b組件中編寫發(fā)出focus事件，否則將永遠(yuǎn)不會(huì)調(diào)用showFocus事件處理程序。不過，Vue 確實(shí)為我們提供了一種以編程方式訪問應(yīng)用于組件的偵聽器的方法，因此我們可以將它們分配到正確的位置:$listener對(duì)象。

再一想，原因很明顯:這允許我們將偵聽器傳遞到組件中的正確位置。例如，使用文本區(qū)域包裝器組件

<div class="my-textarea-wrapper">  <textarea v-on="$listeners" ></textarea></div> 

現(xiàn)在發(fā)生在textarea上的事件就是那些被傳遞的事件。

怎么理解vue中$listeners屬性?

假設(shè)有父組件Parent和子組件Child

那么你在使用Child時(shí)，傳入的所有v-on事件都可以在$listeners對(duì)象中找到。

// Childcreated () {  console.log(this.$listeners) // { 'event-one': f(), 'event-two': f() }} 

為正確的元素分配屬性

如何處理textarea的rows或在任何元素上添加簡單工具提示的title標(biāo)記等屬性呢

默認(rèn)情況下，Vue采用應(yīng)用于組件的屬性，并將其放在該組件的根元素上。但這并非總是我們想要的。如果我們從上方再次查看textarea包裝器，則在這種情況下，將屬性應(yīng)用于textarea本身而不是div更有意義。

為此，我們告訴組件默認(rèn)情況下不要應(yīng)用屬性，而是直接使用$attrs對(duì)象應(yīng)用它們，在 JS 代碼中：

export default {  inheritAttrs: false,} 

在模板中

<div class="my-textarea-wrapper">  <textarea v-bind="$attrs"></textarea></div> 

官方文檔講解組件的屬性傳遞時(shí)，講到$attrs和inheritAttrs這兩個(gè)屬性，且兩個(gè)屬性結(jié)合會(huì)比較好用。乍一看沒看懂，結(jié)合代碼演示才搞清楚。

先隱藏 inheritAttrs: false和v-bind="$attrs"，瀏覽器得到的結(jié)果如下

此處有兩處異常：

1. 父組件中設(shè)置的placeholder等屬性沒有傳到子組件;
2. 父組件設(shè)置的屬性傳遞給了子組件的根元素，即label，而label是不需要的

$attrs和inheritAttrs:false即分別用來解決這兩個(gè)問題首先，inheritAttrs:false解決子組件的根元素繼承父元素的屬性;其次，子組件中添加了v−bind="$attrs"的元素會(huì)繼承父組件的屬性，即使props中沒有定義該屬性

接受瀏覽器的鍵盤導(dǎo)航規(guī)范

可訪問性和鍵盤導(dǎo)航是Web開發(fā)中最常被遺忘的部分之一，也是編寫要在生態(tài)系統(tǒng)中正常運(yùn)行的組件時(shí)要正確處理的最重要的事情之一。

這意味著要確保組件符合瀏覽器規(guī)范:tab鍵應(yīng)該允許選擇表單字段。Enter通常用于激活按鈕或鏈接。

有關(guān)常見組件的鍵盤導(dǎo)航建議的完整列表，可以在W3C網(wǎng)站上找到。遵循這些建議將使您的組件可以在所有應(yīng)用程序中使用，而不僅僅是那些與可訪問性無關(guān)的組件。

使用事件優(yōu)先于回調(diào)

當(dāng)涉及到從組件到其父組件的數(shù)據(jù)通信和用戶交互時(shí)，有兩個(gè)常見的選擇：props中的回調(diào)函數(shù)和事件。因?yàn)?Vue 的自定義事件不會(huì)像原生瀏覽器事件那樣冒泡，所以兩者在功能上是等效的，但是對(duì)于可重用的組件，建議能使用事件就使用事件，其次在再是回調(diào)，為什么?

在Fullstack電臺(tái)的一期節(jié)目中，Vue 核心團(tuán)隊(duì)成員Chris Fritz給出了以下理由：

1. 使用事件使父組件可以清楚地知道什么。它明確區(qū)分了“我們從父組件那里得到的東西”和“我們發(fā)送給組件的東西”。
2. 可以在事件處理程序中直接使用表達(dá)式，從而為簡單情況提供極其緊湊的事件處理程序。
3. 它更符合習(xí)慣——Vue示例和文檔傾向于使用事件來實(shí)現(xiàn)組件與其父組件之間的通信。

幸運(yùn)的是，如果當(dāng)前使用的是props回調(diào)，則很容易修改組件以發(fā)出事件。使用回調(diào)的組件可類似如下：

外面調(diào)用方式：

<my-custom-component :onActionHappened="actionHandler" /> 

更改為基于事件的方法如下所示：

外面調(diào)用方式：

<my-custom-component @action-happened="actionHandler" /> 

限制組件樣式

Vue的單文件組件結(jié)構(gòu)使我們可以將樣式直接嵌入到組件中，尤其是當(dāng)與作用域結(jié)合使用時(shí)，這為我們提供了一種很好的方式來發(fā)布完全打包的樣式化組件，而不會(huì)影響應(yīng)用程序的其他部分。

由于該系統(tǒng)的強(qiáng)大功能，很容易將所有組件樣式放入組件中，并交付一個(gè)完全樣式化的組件。問題是:沒有任何應(yīng)用程序的樣式是相同的，而使組件在我們的應(yīng)用程序中看起來很完美的東西將使它在其他人的應(yīng)用程序中脫穎而出。由于組件樣式通常比全局樣式表包含的時(shí)間晚，因此覆蓋它可能成為一場專一性的噩夢。

防止這種情況,建議任何CSS不是結(jié)構(gòu)所必需的組件(顏色、邊框、陰影等)應(yīng)該被排除在我們的組件文件本身或能夠被關(guān)閉。相反,考慮維護(hù)一個(gè)可定制的SCSS部分允許用戶定制他們的心的內(nèi)容。

在 JS 中：

然后，我們可以

這將允許我們隨意使用現(xiàn)成的樣式，但是想要自定義的用戶不再需要?jiǎng)?chuàng)建高度專一覆蓋，他們只需通過將disableStyles屬性設(shè)置為true即可關(guān)閉樣式。