首頁 >web前端 >Vue.js >vue中如何優雅的封裝第三方元件?封裝方法介紹

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

青灯夜游
青灯夜游轉載
2022-04-19 21:30:112544瀏覽

vue中如何優雅的封裝第三方元件?以下這篇文章就透過實例來探討在vue中更優雅封裝第三方元件的方法,希望對大家有幫助!

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

一、需求場景描述

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

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

然而也不至於從0開始寫一個分頁元件,在原有基礎上封裝就好, 那麼如何快速優雅的封裝一個第三方元件庫的元件呢? v-bind="att##r s"vo##n#="attrs" 和v-on="listeners" ="$listeners",會帶給我們驚喜。 它們可以使得封裝後的元件, 「繼承」原始元件的幾乎所有 v-bind 屬性和 v-on 事件,且用法和作用與在原始元件一樣。 封裝el-image 為 custom-image 元件,所有使用custom-image 展示圖片的地方, 圖片載入過程中都會統一展示「載入中...」的提示,且當載入出錯時,會顯示統一的預設圖。 下面是一個 custom-image 元件載入過程以及載入出錯的效果。

vue中如何優雅的封裝第三方元件?封裝方法介紹二、關鍵技術點介紹

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##−b ind="listeners"的作用與用法與v-bind="##n #d="attrs"類似, 它可以將父作用域中的使用v-on的時間監聽器向下傳入到使用了v-on="l iste#ne##r s"在元件中,和v#−b##i

=

##################"################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(&#39;image-f/icon-empty-img.png&#39;)" alt="图片加载失败.png"/>
      </div>
      <div slot="placeholder">加载中...</div>
    </el-image>
  </div>
</template>

<script>
export default {
  name: &#39;CustomImage&#39;
}
</script>

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

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

(學習影片分享:web前端開發程式設計入門

以上是vue中如何優雅的封裝第三方元件?封裝方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除