vue中組件可重用性概念的示例分析

這篇文章主要介紹vue中組件可重用性概念的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

1.模板化

通過模板化，我們將一些重復性高的代碼包裝在其自己的組件中，而不是在周圍到處復制和粘貼代碼。

當我們重用該組件（而不是直接使用代碼）時，它為我們帶來了兩個好處：

• 將來進行更改就會容易得多，因為我們只需要在一個地方更改

• 我們不必記住每個重復代碼復被復制到了哪些地方

這是最基本的，也是最經常談論的可重用性形式。

2. 可配置

對于某些組件，我們需要根據需求對它們的工作方式進行修改，如:

Button組件默認有一個主版本，也有一個帶有圖標版本。但我們沒有為每個版本創建全新的組件，而是指定 props 做到不同類型之間切換。

添加這些props通常不會給組件增加很大的復雜度，同時，又能給我們在使用組件方面帶來更多在的靈活性。

注意:這不同于使用prop來保存狀態或數據，比如loading prop 或disabled prop。

3.適應性

可配置的最大問題是缺乏遠見。 我們需要預見將來的需求，并通過放置對應的 prop 將它們構建到組件中。

但是，如果你的組件具有足夠適應性，則無需更改組件即應對未來的需求。

為了讓我們的組件具有足夠的適應性，我們可以使用 插槽 來實現。

例如，我們可以使用默認的插槽來代替在傳入Button組件的 text ：

<!-- Button.vue -->
<template>
  <button
    class="btn btn--default"
    @click="$emit('click')"
  >
    <slot />
  </button>
</template>

現在我們不局限于傳入的類型是 string 還是 number。

如果我們想在不修改 Button 組件的情況下添加loading ，我們可以這樣做:

<template>
  <Button>
    <img
      v-if="loading"
      src="spinner.svg"
    />
    Click Me
  </Button>
</template>

4.反轉性

除了通過插槽傳遞完整的標記塊給我們的子組件，我們還可以傳遞一組有關如何渲染的指令。

這就像我們根據食譜來做菜，而不是叫外賣。 當我們遵循食譜時，需要做更多的工作，但是我們完全可以按自己的節奏來制制作， 我們可以隨時進行調整，也可以完全放棄不按食譜的流程來。

我們使用作用域插槽來為我們的組件增加更大的靈活性。

5. 擴展

通過適應性和反轉性，我們擁有必要的一些技術基礎，這些技能可以最大限度地提高組件的可重用性。

下一步是將這些技術應用于整個組件，以便我們更輕松地擴展其行為。

我們使用命名插槽在組件中添加一個或多個擴展點。 僅適應性和反轉性本身給我們提供了擴展行為的一種選擇，而擁有多個擴展點則為我們提供了許多不同的選擇。

這里，我們有一個Modal組件，其中包含header，default和footer：

<template>
  <div class="modal">
    <slot name="header">
      <h3>{{ title }}</h3>
    </slot>

    <!-- Default slot for main content -->
    <slot />

    <slot name="footer">
      <Button @click="closeModal">
        Close
      </Button>
    </slot>
  </div>
</template>

這是一個相當簡單的擴展示例，其中我們已經有幾個擴展該組件的選項：

• 只需覆蓋default slot即可添加我們的內容

• 可以通過插槽名來覆蓋 header 的內容

• 可以通過插槽名來覆蓋 footer 的內容，其內容還是以不同風格按鈕為主

• header和 footer的插槽更多是用于自定義

你不必擴展此組件的行為，但也可以擴展其一部分。 無論哪種方式，我們都能獲得很大的靈活性和大量的代碼重用性。

6. 嵌套

在擴展之上更高級重用性就是嵌套， 我們可以多個基本組件為基礎， 一層嵌套一層，一開始可能聽起來很瘋狂，但它非常有用，特別是在大中型應用程序中。

我們從一個通過基礎組件開始，該組件的功能相當普遍。 下一個組件就更加具體，以幾種方式擴展了基礎組件。 然后不斷以前面基礎組件為底往上擴展，直到我們擁有完成實際工作的最終組件。

這類似我們從非常普通的動物(Animal )到更特定的哺乳動物(Mammal )，然后是狗(Dog )，最后止于貴賓犬(Poodle)的方式。 如果我們需要的只是貴賓犬(Poodle)組件，看上去，我們整這么基礎組件就是浪費時間。但是在大型應用程序中就不一樣了，我們需要在相同的基本概念上進行多次更改，來滿足不同的個性化需求，這時這種以基礎組件嵌套的思想就很重要。

我們可以擴展犬類(Dog)組件來獲得柯基犬(Corgi )和比格犬(Beagle)組件。或者擴展哺乳動物(Mammal )組件以獲得貓(Cat )組件，這樣就可以添加老虎(Tiger)和獅子(Lion)組件。

以上是“vue中組件可重用性概念的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！