建站
咨詢
售后
建站咨詢
新聞中心
一、需求場(chǎng)景描述
再例如自定義分頁(yè)組件也很常見，組件的樣式，默認(rèn)支持的每頁(yè)數(shù)目， 封裝之后再用，在可維護(hù)性和開發(fā)效率上都很有好處。
10多年的京山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整京山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“京山網(wǎng)站設(shè)計(jì)”,“京山網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
然而也不至于從0開始寫一個(gè)分頁(yè)組件，在原有基礎(chǔ)上封裝就好， 那么如何快速優(yōu)雅的封裝一個(gè)第三方組件庫(kù)的組件呢？v-bind="attrs"和v?on="attrs" 和 v-on="attrs"和v?on="listeners" ="$listeners"，會(huì)給我們帶來(lái)驚喜。它們可以使得封裝后的組件， “繼承”原組件的幾乎所有 v-bind 屬性和 v-on 事件，且用法和作用與在原組件一樣。
封裝el-image 為 custom-image 組件，所有使用custom-image 展示圖片的地方， 圖片加載過(guò)程中都會(huì)統(tǒng)一展示“加載中...”的提示，且當(dāng)加載出錯(cuò)時(shí)，會(huì)展示統(tǒng)一的默認(rèn)圖。下面是一個(gè) custom-image 組件加載過(guò)程以及加載出錯(cuò)的效果。
GIF 2022-4-15 15-58-13.gif
二、關(guān)鍵技術(shù)點(diǎn)介紹
1.v-bind="$attrs"
v-bind="$attrs"的妙用是在創(chuàng)建更高級(jí)別的組件，在封裝第三方組件時(shí)，
可以自動(dòng)將在父作用域中使用的v-bind的屬性自動(dòng)綁定，
并向下傳入被封裝的使用了v-bind="$attrs"的組件。
一段摘自 vue 官網(wǎng)的介紹
包含了父作用域中不作為 prop 被識(shí)別 (且獲取) 的 attribute
綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí)，
這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，
并且可以通過(guò) v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級(jí)別的組件時(shí)非常有用。
例如我們封裝的custom-Image組件，使用了v-bind="$attrs"之后， 我們?cè)赾ustom-Image組件中，也擁有了el-image的幾乎所有屬性， 而且其作用效果和用法，是和我們使用el-image是一樣的， 也就說(shuō)我們可以看著el-image的文章去使用custom-Image。
2.v-on="$listeners"
v-on="listeners"的作用和用法與v?bind="listeners"的作用和用法與v-bind="listeners"的作用和用法與v?bind="attrs"類似， 它可以將父作用域中的使用v-on的時(shí)間監(jiān)聽器向下傳入到使用了v-on="listeners"組件中，和v?bind="listeners"組件中， 和v-bind="listeners"組件中，和v?bind="attrs"的功效類似，只不過(guò)一個(gè)屬性一個(gè)是事件。還是custom-Image組件為例， 這時(shí)候custom-Image組件就擁有了el-image組件的幾乎所有事件。而且其作用效果和用法，是和我們使用el-image是一樣的。
包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。
它可以通過(guò) v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用。
一段摘自 vue 官網(wǎng)的介紹
三、封裝el-image的代碼示例
使用custom-Image組件的示例
封裝el-image為custom-Image組件的示例
加載中...
網(wǎng)站題目：在 Vue 中更優(yōu)雅的封裝第三方組件
網(wǎng)頁(yè)網(wǎng)址：http://www.dlmjj.cn/article/dhjsosg.html
