怎么寫好一個vue組件

這篇文章主要介紹了怎么寫好一個vue組件，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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

1. prop 允許外部環境傳遞數據給組件

2. event 允許從組件內觸發外部環境的副作用

3. slot 允許外部環境將額外的內容組合在組件中

prop

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

僅一個值傳入組件

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

<my-component v-model="foo" />

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

<component-no-sync :childNeed="foo" />

很多值需要傳入組件

我們原先的父組件寫法：

<child-component :prop1="var1" :prop2="var2" :prop="var3" ... />

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

傳入一個對象

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

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

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

<child-component v-model="text" :setting="{color:'bule'}" />

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

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

computed 屬性

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

<template>
 <el-select v-model="email">
  <el-option
   v-for="item in adminUserOptions"
   :key="item.email"
   :label="item.email"
   :value="item.email"
  />
 </el-select>
</template>

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

靈活的 prop

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

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

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

處理 rowKey 生成 RowIdentity 的函數源碼：

//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')
 // 行數據的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
  // 通過函數自定義
  // 我處理過父和子id可能相同的情況，只好通過Function自定義
  // 不可以通過時間或者隨機字符串生成ID
 } else if (typeof rowKey === 'function') {
  return rowKey.call(null, row)
 }
}

由于業務場景多變，組件的設計者很難考慮完全，不妨設計靈活的 prop，由開發者自行定義

事件

emit/on

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

v-model

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

<input v-model="searchText" />

<input
 v-bind:value="searchText"
 v-on:input="searchText = $event.target.value"
/>

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

<custom-input
 v-bind:value="searchText"
 v-on:input="searchText = $event"
></custom-input>

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

自定義 v-model

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

sync（雙向綁定語法糖）

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

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

Function 通過 prop 傳入

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

有讀者可能會問，為什么不能把子組件里面的事件 emit 出來，通過父組件處理？然后傳入一個控制子組件的 prop 屬性。
我想說的是，可以，但是這樣真的很麻煩，子組件內部的狀態卻要依賴父組件傳值。

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

但是可以通過傳入 function（你可以理解為一個鉤子），參與組件狀態變更的行為。比如很好用的拖拽庫,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函數控制
   return onMove(sendEvt, originalEvent);
}

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

父組件直接操作子組件

很少有這樣的騷操作，但是由于數據和操作的復雜性，當數據結構復雜，嵌套過深的情況下，父組件很難對于子組件的數據的精細控制

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

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

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

插槽

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

默認插槽

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

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

后備內容

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

封裝他人組件

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

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

<template>
 <div>
  <el-button v-bind="$attrs">導出</el-button>
 <div>
</template>
// 父組件使用
<my-button type='primary' size='mini'/>

組件命名

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

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

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

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

如何解決呢，我們可以把 index.js 當作一個單純的入口，不承擔任何邏輯。僅僅負責引入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,把一個<template> 元素當做不可見的包裹元素，并在上面使用 v-if。最終的渲染結果將不包含 <template> 元素
能用 computed 計算屬性的，盡量就不用 watch

模板里面寫太多 v-if 會讓你的模板很難看，v-else-if盡量還是別用了吧。一長串的 if else，在模板里面看的很亂

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么寫好一個vue組件”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!