本篇內(nèi)容介紹了“vue中怎么優(yōu)雅的封裝第三方組件”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司專注于民樂網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供民樂營銷型網(wǎng)站建設(shè)，民樂網(wǎng)站制作、民樂網(wǎng)頁設(shè)計、民樂網(wǎng)站官網(wǎng)定制、小程序設(shè)計服務(wù)，打造民樂網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供民樂網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

一、需求場景描述

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

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

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

封裝el-image 為 custom-image 組件，所有使用custom-image 展示圖片的地方， 圖片加載過程中都會統(tǒng)一展示“加載中...”的提示，且當加載出錯時，會展示統(tǒng)一的默認圖。 下面是一個 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 除外)。當一個組件沒有聲明任何 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\mathrm{"}\text{的作用和用法與}v?bind=\mathrm{"}$listeners"的作用和用法與v?bind="attrs"類似， 它可以將父作用域中的使用v-on的時間監(jiān)聽器向下傳入到使用了v-on="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">
        <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中怎么優(yōu)雅的封裝第三方組件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

文章標題：vue中怎么優(yōu)雅的封裝第三方組件
瀏覽路徑：http://aaarwkj.com/article20/peisjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、軟件開發(fā)、、用戶體驗、域名注冊、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)