vue中如何優雅的封裝第三方元件？封裝方法介紹

vue中如何優雅的封裝第三方元件？下面本篇文章就通過範例來探討一下在vue中更優雅封裝第三方元件的方法，希望對大家有所幫助！

一、需求場景描述

實際開發的時候，為了減少重複造輪子，提高工作效率，節省開發時間成本，免不了會使用ui元件庫，比如在web前端很受歡迎的element-ui。但有的時候，我們需要在原元件的基礎上做些改造，比如一個image元件，我們需要統一在圖片載入失敗的時候展示的特定圖，每次使用元件都加一遍，麻煩耗時，關鍵是維護成本高，當需要更新這個載入出錯的圖片時，得再次一個個去找到使用該元件的地方修改。（學習視訊分享：）

再例如自定義分頁元件也很常見，元件的樣式，預設支援的每頁數目，封裝之後再用，在可維護性和開發效率上都很有好處。

然而也不至於從0開始寫一個分頁元件，在原有基礎上封裝就好，那麼如何快速優雅的封裝一個第三方元件庫的元件呢？ v-bind=" $attrs" 和 v-on="$ listeners" ="$listeners"，會給我們帶來驚喜。它們可以使得封裝後的元件，「繼承」原元件的幾乎所有 v-bind 屬性和 v-on 事件，且用法和作用與在原元件一樣。

封裝el-image 為 custom-image 元件，所有使用custom-image 展示圖片的地方，圖片載入過程中都會統一展示「載入中...」的提示，且當載入出錯時，會展示統一的預設圖。下面是一個 custom-image 元件載入過程以及載入出錯的效果。

二、關鍵技術點介紹

1.v-bind="$attrs"

v-bind="$attrs"的妙用是在建立更高階別的元件，在封裝第三方元件時，

可以自動將在父作用域中使用的v-bind的屬性自動繫結，

並向下傳入被封裝的使用了v-bind="$attrs"的元件。

一段摘自 vue 官網的介紹

包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute
繫結 (class 和 style 除外)。當一個元件沒有宣告任何 prop 時，
這裡會包含所有父作用域的繫結 (class 和 style 除外)，
並且可以通過 v-bind="$attrs" 傳入內部元件——在建立高階別的元件時非常有用。

例如我們封裝的custom-Image元件，使用了v-bind="$attrs"之後，我們在custom-Image元件中，也擁有了el-image的幾乎所有屬性，而且其作用效果和用法，是和我們使用el-image是一樣的，也就說我們可以看著el-image的文章去使用custom-Image。

2.v-on="$listeners"

v-on=" $listeners"的作用和用法與v-bind="$ attrs"類似，它可以將父作用域中的使用v-on的時間監聽器向下傳入到使用了v-on=" $listeners"元件中，和v-bind="$ attrs"的功效類似，只不過一個屬性一個是事件。還是custom-Image元件為例，這時候custom-Image元件就擁有了el-image元件的幾乎所有事件。而且其作用效果和用法，是和我們使用el-image是一樣的。

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。
它可以通過 v-on="$listeners" 傳入內部元件——在建立更高層次的元件時非常有用。
一段摘自 vue 官網的介紹

三、封裝el-image的程式碼範例

使用custom-Image元件的範例

<custom-Image fit="fill" class="icon-img" :src="picPreview(expert)"></custom-Image>

封裝el-image為custom-Image元件的範例

<template>
  <div id="CustomImage">
    <el-image v-bind="$attrs" v-on="$listeners">
      <div slot="error">
        <img :src="require('image-f/icon-empty-img.png')" alt="圖片載入失敗.png"/>
      </div>
      <div slot="placeholder">載入中...</div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: 'CustomImage'
}
</script>

<style scoped>
  #CustomImage {
  .image-slot {
    text-align: center;
  }

  .placeholder-slot {
    text-align: center;
  }
}
</style>

（學習視訊分享：、）

以上就是vue中如何優雅的封裝第三方元件？封裝方法介紹的詳細內容，更多請關注TW511.COM其它相關文章！