欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何在vue中更優(yōu)雅的封裝第三方組件詳解

 更新時間:2022年05月01日 09:37:31   作者:靈扁扁  
在封裝第三方組件中,經(jīng)常會遇到一個問題,下面這篇文章主要給大家介紹了關(guān)于如何在vue中更優(yōu)雅的封裝第三方組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、需求場景描述

實際開發(fā)的時候,為了減少重復(fù)造輪子,提高工作效率,節(jié)省開發(fā)時間成本, 免不了會使用ui組件庫,比如在web前端很受歡迎的element-ui。 但有的時候,我們需要在原組件的基礎(chǔ)上做些改造,比如一個image組件, 我們需要統(tǒng)一在圖片加載失敗的時候展示的特定圖,每次使用組件都加一遍, 麻煩耗時,關(guān)鍵是維護(hù)成本高,當(dāng)需要更新這個加載出錯的圖片時, 得再次一個個去找到使用該組件的地方修改。

再例如自定義分頁組件也很常見,組件的樣式,默認(rèn)支持的每頁數(shù)目, 封裝之后再用,在可維護(hù)性和開發(fā)效率上都很有好處。

然而也不至于從0開始寫一個分頁組件,在原有基礎(chǔ)上封裝就好, 那么如何快速優(yōu)雅的封裝一個第三方組件庫的組件呢? v-bind="attrs"和v−on="listeners" ="$listeners",會給我們帶來驚喜。 它們可以使得封裝后的組件, “繼承”原組件的幾乎所有 v-bind 屬性和 v-on 事件,且用法和作用與在原組件一樣。

封裝el-image 為 custom-image 組件,所有使用custom-image 展示圖片的地方, 圖片加載過程中都會統(tǒng)一展示“加載中...”的提示,且當(dāng)加載出錯時,會展示統(tǒng)一的默認(rèn)圖。 下面是一個 custom-image 組件加載過程以及加載出錯的效果。

二、關(guān)鍵技術(shù)點介紹

1.v-bind="$attrs"

v-bind="$attrs"的妙用是在創(chuàng)建更高級別的組件,在封裝第三方組件時,

可以自動將在父作用域中使用的v-bind的屬性自動綁定,

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

一段摘自 vue 官網(wǎng)的介紹

包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute

綁定 (class 和 style 除外)。當(dāng)一個組件沒有聲明任何 prop 時,

這里會包含所有父作用域的綁定 (class 和 style 除外),

并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級別的組件時非常有用。

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

2.v-on="$listeners"

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

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。

它可以通過 v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時非常有用。

一段摘自 vue 官網(wǎng)的介紹

三、封裝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" class="image-slot">
        <img :src="require('image-f/icon-empty-img.png')" alt="圖片加載失敗.png"/>
      </div>
      <div slot="placeholder" class="placeholder-slot">加載中...</div>
    </el-image>
  </div>
</template>

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

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

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

總結(jié)

到此這篇關(guān)于如何在vue中更優(yōu)雅的封裝第三方組件的文章就介紹到這了,更多相關(guān)vue封裝第三方組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue 如何處理防止按鈕重復(fù)點擊問題

    vue 如何處理防止按鈕重復(fù)點擊問題

    這篇文章主要介紹了vue 如何處理防止按鈕重復(fù)點擊問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 解決el-date-picker日期選擇控件少一天的問題

    解決el-date-picker日期選擇控件少一天的問題

    這篇文章主要介紹了解決el-date-picker日期選擇控件少一天的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 部署vue+Springboot前后端分離項目的步驟實現(xiàn)

    部署vue+Springboot前后端分離項目的步驟實現(xiàn)

    這篇文章主要介紹了部署vue+Springboot前后端分離項目的步驟實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • 基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解

    基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解

    這篇文章主要介紹了基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-08-08
  • 手寫?Vue3?響應(yīng)式系統(tǒng)(核心就一個數(shù)據(jù)結(jié)構(gòu))

    手寫?Vue3?響應(yīng)式系統(tǒng)(核心就一個數(shù)據(jù)結(jié)構(gòu))

    這篇文章主要介紹了手寫?Vue3?響應(yīng)式系統(tǒng)(核心就一個數(shù)據(jù)結(jié)構(gòu)),響應(yīng)式就是被觀察的數(shù)據(jù)變化的時候做一系列聯(lián)動處理。就像一個社會熱點事件,當(dāng)它有消息更新的時候,各方媒體都會跟進(jìn)做相關(guān)報道。這里社會熱點事件就是被觀察的目標(biāo)
    2022-06-06
  • vue移動端實現(xiàn)左滑編輯與刪除的全過程

    vue移動端實現(xiàn)左滑編輯與刪除的全過程

    vue.js是現(xiàn)在流行的js框架之一,vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式j(luò)avascript框架,這篇文章主要給大家介紹了關(guān)于vue移動端實現(xiàn)左滑編輯與刪除的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • vue 實現(xiàn)小程序或商品秒殺倒計時

    vue 實現(xiàn)小程序或商品秒殺倒計時

    這篇文章主要介紹了vue 實現(xiàn)倒計時秒殺的組件,緊接著通過實例代碼給大家介紹小程序或者vue商品秒殺倒計時功能,需要的朋友可以參考下
    2019-04-04
  • vue3的ref,computed,reactive和toRefs你都了解嗎

    vue3的ref,computed,reactive和toRefs你都了解嗎

    這篇文章主要為大家詳細(xì)介紹了vue3的ref,computed,reactive和toRefs,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • vue3?element?plus按需引入最優(yōu)雅的用法實例

    vue3?element?plus按需引入最優(yōu)雅的用法實例

    這篇文章主要給大家介紹了關(guān)于vue3?element?plus按需引入最優(yōu)雅的用法,以及關(guān)于Element-plus按需引入的一些坑,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-03-03
  • VUE中的打包刪除文件、圖片的HASH碼

    VUE中的打包刪除文件、圖片的HASH碼

    這篇文章主要介紹了VUE中的打包刪除文件、圖片的HASH碼,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評論