摘要：比如很好用的拖拽庫控制元素是否被拖動的行為。僅僅負責(zé)引入以及個人喜好把一個元素當做不可見的包裹元素，并在上面使用。你有什么寫組件的獨特技巧，不妨在評論區(qū)告訴我吧

一個適用性良好的組件，一種是可配置項很多，另一種就是容易覆寫，從而擴展功能

Vue 組件的 API 來自三部分——prop、事件和插槽：

prop 允許外部環(huán)境傳遞數(shù)據(jù)給組件

event 允許從組件內(nèi)觸發(fā)外部環(huán)境的副作用

slot 允許外部環(huán)境將額外的內(nèi)容組合在組件中

prop

組件具有自身狀態(tài)，當沒有相關(guān) porps 傳入時，使用自身狀態(tài)完成渲染和交互邏輯；當該組件被調(diào)用時，如果有相關(guān) props 傳入，那么將會交出控制權(quán)，由父組件控制其行為

僅一個值傳入組件

如果該組件設(shè)計上支持雙向綁定，可使用v-model將該參數(shù)傳入組件，減少記憶成本（畢竟 vue 官方的語法糖，不用白不用）

如果該組件可以獨立運行，不依賴父組件時，還是給這個值起個名字吧

很多值需要傳入組件

我們原先的父組件寫法：

其實可以在父組件上直接使用v-bind={子組件props集合}

傳入一個對象

比如當一個組件有諸多配置項，且當沒有傳入配置項取用組件內(nèi)部默認項的時候，為了方便覆寫子組件的內(nèi)部配置項，不妨使用一個對象將配置收集到一起，但是這種做法有兩個缺點，謹慎使用

不能利用 props 驗證對象里面每個的值類型

如果你子組件修改了父組件傳入的對象A，父組件的對象A也會發(fā)生修改，所以我一般只有子組件不會修改父組件傳入的值的情況下，我才會傳入對象。父組件把對象傳入子組件，是實現(xiàn)雙向綁定的hack方式，但不推薦，vue 3.0可能就要對這種方式說拜拜了，為了以后代碼好改，還是不要用這種方式實現(xiàn)雙向綁定

// 子組件內(nèi)部讀取配置，通過擴展運算符替換掉默認配置
const setting ={
  ...defaultSetting,
  ...this.setting
}

還有一種魚和熊掌兼得的方法，可以給子組件包一層，叫中間組件。父組件將配置項作為一個對象傳入中間組件，在中間組件里面對默認配置項進行初始化和覆寫，然后再以v-bind={生成好的配置}的方式傳入子組件，在子組件里面進行驗證。

computed 屬性

vue 的 computed 屬性默認是只讀的，你可以提供一個 setter。它可以優(yōu)化我寫組件的邏輯，適用于父組件處理的值和子組件處理的值是同一個的情況

export default {
  props: {
    value: {}
  },
  computed: {
    email: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("input", val)
        this.$emit("change", val)
      }
    }
  }
}

靈活的 prop

我們常看到一些優(yōu)秀的組件庫，傳入的值既可以是一個 String/Number，也可以是一個函數(shù)。

比如ElementUI的Table組件，當你想要顯示樹形數(shù)據(jù)的時候，必須傳入row-key。看它的介紹就知道是有多靈活：

row-key的作用：行數(shù)據(jù)的 Key，用來優(yōu)化 Table 的渲染；在使用 reserve-selection 功能與顯示樹形數(shù)據(jù)時，該屬性是必填的。類型為 String 時，支持多層訪問：user.info.id，但不支持 user.info[0].id，此種情況請使用 Function

處理 rowKey 生成 RowIdentity 的函數(shù)源碼：

//https://github.com/ElemeFE/element/blob/dev/packages/table/src/util.js
export const getRowIdentity = (row, rowKey) => {
  if (!row) throw new Error("row is required when get row identity")
  // 行數(shù)據(jù)的key
  if (typeof rowKey === "string") {
    if (rowKey.indexOf(".") < 0) {
      return row[rowKey]
    }
    // 支持多層訪問：user.info.id
    let key = rowKey.split(".")
    let current = row
    for (let i = 0; i < key.length; i++) {
      current = current[key[i]]
    }
    return current
    // 通過函數(shù)自定義
    // 我處理過父和子id可能相同的情況，只好通過Function自定義
    // 不可以通過時間或者隨機字符串生成ID
  } else if (typeof rowKey === "function") {
    return rowKey.call(null, row)
  }
}

由于業(yè)務(wù)場景多變，組件的設(shè)計者很難考慮完全，不妨設(shè)計靈活的 prop，由開發(fā)者自行定義

事件

emit/on

讀者肯定知道 emit/on 如何使用，我就簡單說一下 vue 的 v-model和sync的語法糖，我們可以利用這些語法糖，幫助我們寫出簡潔的代碼（父組件可以少寫監(jiān)聽子組件的事件，比如你不用寫@input）

v-model

看一下下面的代碼示例，就能懂這句話了。v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 JavaScript 在組件的 data 選項中聲明初始值

// 當把v-model用在組件上

為了讓它正常工作，這個組件內(nèi)的 必須：將其 value 特性綁定到一個名叫 value 的 prop 上在其 input 事件被觸發(fā)時，將新的值通過自定義的 input 事件拋出，即this.$emit("input",changedValue)

自定義 v-model

為啥要自定義組件的 v-model 呢，因為數(shù)據(jù)不符合要求唄。你的輸入值不可能總是 value ，你的事件不可能總是 input，具體詳見文檔

sync（雙向綁定語法糖）

vue 真的是方便了開發(fā)者很多，站在開發(fā)者的角度考慮，很大的提升開發(fā)效率

以 ?update:myPropName? 的模式觸發(fā)事件取代雙向綁定this.$emit("update:title", newTitle)，具體詳見文檔

Function 通過 prop 傳入

本來想放在 prop 部分的，但是個人覺得其實它和 emit/on 更有關(guān)系一點

有讀者可能會問，為什么不能把子組件里面的事件 emit 出來，通過父組件處理？然后傳入一個控制子組件的 prop 屬性。

我想說的是，可以，但是這樣真的很麻煩，子組件內(nèi)部的狀態(tài)卻要依賴父組件傳值。

該組件內(nèi)部的狀態(tài)，我們需要把它暴露出來嘛？我覺得不需要，組件內(nèi)部的狀態(tài)就讓它處于組件內(nèi)部

但是可以通過傳入 function（你可以理解為一個鉤子），參與組件狀態(tài)變更的行為。比如很好用的拖拽庫,Vue.Draggable控制元素是否被拖動的行為。

Vue.Draggable可以傳入一個 move 方法，我們看一下它如何處理的。

onDragMove(evt, originalEvent) {
      const onMove = this.move;
      // 如果沒有傳入move，那么返回true，可以移動
      if (!onMove || !this.realList) {
        return true;
      }

      const relatedContext = this.getRelatedContextFromMoveEvent(evt);
      const draggedContext = this.context;
      const futureIndex = this.computeFutureIndex(relatedContext, evt);
      Object.assign(draggedContext, { futureIndex });
      const sendEvt = Object.assign({}, evt, {
        relatedContext,
        draggedContext
      });
      // 組件行為由傳入的move函數(shù)控制
      return onMove(sendEvt, originalEvent);
}

這樣做的好處，就是組件內(nèi)部自由一套運行邏輯，但是我可以通過傳入 function 來干預(yù)。我沒有直接修改組件內(nèi)部狀態(tài)，而是通過函數(shù)（你可以稱它為鉤子）去觸發(fā)，方便調(diào)試組件，使得組件行為具有可預(yù)測性

父組件直接操作子組件

很少有這樣的騷操作，但是由于數(shù)據(jù)和操作的復(fù)雜性，當數(shù)據(jù)結(jié)構(gòu)復(fù)雜，嵌套過深的情況下，父組件很難對于子組件的數(shù)據(jù)的精細控制

因此，如果不得已而為之，請在文檔里，把子組件可以調(diào)用的方法暴露出來，供使用者使用。使用這種組件比較麻煩，得去看文檔，沒有文檔的只好去看源碼

ElementUI的tree組件提供了很多方法，用于父組件去操作子組件。

eg:this.$refs.tree.setCheckedKeys([]);

插槽

HTML  element 是 Web Components 技術(shù)的一部分，是自定義 web 組件的占位符，vue 里面的 slot 的靈感來自 Web Components 規(guī)范草案，具體見文檔

默認插槽

能用默認插槽就不要使用具名插槽，我真的不想使用你這個組件的時候還去翻看你的插槽叫什么名字

之前我司一個網(wǎng)頁模板 三個插槽，header，body，footer，我用的是真的難受，每次都記不得，看似三個單詞都挺熟悉的，但是其實 head,content,foot 這些單詞也都行啊，誰知道用啥（可能我老了吧，組件如果不是必要盡量不要讓人有記憶成本）。

后備內(nèi)容

就是給組件里面的插槽定義默認值，它只會在沒有提供內(nèi)容的時候被渲染。建議用上插槽就給它添加默認內(nèi)容

封裝他人組件

有些時候我們可能是對他人的組件進行封裝，這里強烈推薦使用v-bind="$attrs" 和 v-on="$listeners"。 vm.$attrs 是一個屬性，其包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。這些未識別的屬性可以通過 v-bind="$attrs" 傳入內(nèi)部組件。未識別的事件可通過v-on="$listeners"傳入

舉個例子，比如我創(chuàng)建了我的按鈕組件myButton，封裝了 element-ui 的 el-button 組件（其實什么事情都沒做），在使用組件 時，就可以直接在組件上使用 el-button 的屬性,不被 prop 識別的屬性會傳入到 el-button 元素上去

// 父組件使用

組件命名

這里推薦遵循 vue 官方指南，值得一看

我們構(gòu)建組件的時候通常會將其入口命名為 index.vue ，引入的時候，直接引入該組件的文件夾即可。

但是這樣做會有一個問題，當你編輯多個組件的時候，所有的組件入口都叫做index.vue，容易糊涂

vscode 顯然意識到了這個問題，所以當文件名相同的文件被打開時，它會在文件名旁邊顯示文件夾名

如何解決呢，我們可以把 index.js 當作一個單純的入口，不承擔任何邏輯。僅僅負責(zé)引入component-name-container以及export default component-name-container

my-app
└── src
        └── components
                └── component-name
                    ├── component-name.css
                    ├── component-name-container.vue
                    └── index.js

tips（個人喜好）

template,把一個