無論在任何的語言或框架中，我們都提倡**的復用性。對於vue來說也是如此，相同的**邏輯會被封裝成元件，除了復用之外，更重要的是統一管理提高開發效率。我真就接手過乙個專案，多個頁面都會用到的列表，沒有去封裝列表元件，只要有一點改動，每個頁面都得加上。很肯定的說，沒有用元件化開發的vue專案是沒有靈魂的。所以如何封裝乙個優雅且復用性高的元件成為我們必需的技能。
首先來看乙個tab元件的實現，看看它存在什麼問題，**可以改進？
這個元件最大的問題就是，activename 需要使用者額外通過事件來手動更新，假如有另乙個使用者接手，在不知道這種情況下使用，會出現tab沒有切換的情況。然後要去看元件內部實現，再回來修改**，很顯然這樣的元件是失敗的。本著所有的髒活累活都由元件實現的原則，理想的狀態應該是使用者不需要管理 activename，而是由元件內部去更新。
可能有人會想到，既然要由內部管理，那在元件內部修改prop的值是不是就可以了？來看下這樣的做法是否可行
修改元件tabchange方法，在點選時更新prop的值
tabchange(item)由於prop是單向資料流，父級prop的更新會向下流動到子元件中，相反的在子元件內部直接更新狀態，會導致資料的流向不明確。例如，在父元件中有多個子元件依賴同乙個屬性，其中乙個子元件更新該屬性，會引發其餘子元件發生改變，發生問題時不容易被找到，因此vue不推薦我們這樣做。另外，在父元件發生更新時，子元件的prop會被重新整理為最新的值。
單向資料流:
元件model選項
允許乙個自定義元件在使用 v-model 時定製 prop 和 event。預設情況下，乙個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入型別比如單選框和核取方塊按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。model:
在model選項裡，我們可以繫結乙個屬性，並為其新增事件，只需在呼叫方法時傳入值即可更新屬性。
注意你仍然需要在元件的 props 選項裡宣告 prop。使用元件雙向繫結後，屬性在元件內部被更新時，父元件的 activename 也會隨之更新，這樣使用者可以很明確的知道資料可能會被修改。
Vue自定義雙向繫結
父子元件雙向繫結v model非表單元素 children.vue h1 template export default props mounted 3000 script parent.vue message children template import children from compo...
vue 自定義元件v model實現雙向繫結
官方文件 2.2.0 新增 型別 詳細 允許乙個自定義元件在使用 v model 時定製 prop 和 event。預設情況下，乙個元件上的 v model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入型別比如單選框和核取方塊按鈕可能想使用 value prop...
自定義元件實現v model雙向繫結
v model是乙個特殊的語法糖，相當於繫結了 value和 input兩個命令。所以，v model在使用時，需要繫結value和要響應input這個事件。子元件內的全部 實現 props的作用 在這裡接收元件在外部使用時，v model傳進來的值。傳進來的值不能修改，否則會違反vue單向資料流的...