從微信小程式到鴻蒙js開發 14 自定義元件

鴻蒙入門指南，小白速來！從萌新到高手，怎樣快速掌握鴻蒙開發？【課程入口】

目錄：1、新建元件

2、前端設計

3、頁面使用

4、屬性傳入

5、自定義事件

在專案開發中，有些業務需求是需要通過多個元件共同實現的。為了便於模組化管理，減少**的冗餘，我們可以使用自定義元件，將多個元件融合成為乙個元件。這部分官方文件中個人感覺講述的不夠詳細和連貫，在此做乙個總結。

1、新建元件

在專案工程目錄上右鍵, new, js component即可新建乙個元件，目錄自動生成在js資料夾中，與default平級。

2、前端設計

自定義元件的目錄結構和頁面一致，這裡做乙個購物車中可以增加和減少商品個數的元件。

hml檢視層：

- 1 +

css渲染層：

.container 
.container>text 
.icon 
.cnt

元件無法像頁面一樣在遠端裝置中直接檢視，但可通過ide的previewer檢視效果。

3、頁面使用

在需要使用該元件的頁面中通過element標籤引入。該標籤可與最外層div平級，個人習慣將它們寫在最上面。

name屬性指定元件標籤名，src指向該元件的hml檔案。

使用元件，和已有元件一樣，用自定義的標籤引入即可。若element中沒有指定name屬性，則和hml檔名一致。

看一眼效果：

4、屬性傳入

商品的索引、購買件數等屬性需要在頁面中通過屬性傳入。在自定義元件的js檔案的data中，定義乙個鍵為"props"的字串陣列，其中存放所有該元件支援的屬性。

export default ,
}

檢視層即可直接通過動態繫結取得屬性值。

- 
} 
+

在使用該元件的頁面中，通過屬性key="屬性value" 即可將屬性傳入元件。這裡需注意自定義元件的屬性定義和使用採用駝峰命名法，使用該元件屬性時採用短橫線分隔命名法，對應的屬性值才可以正常傳遞。

這樣就可以讓元件繫結索引值，並顯示商品選擇的個數了。

5、自定義事件

點選「+」或「-」，對應商品的選擇個數可以隨之變化，這個元件的功能就完成了。這就要用到自定義事件。

自定義元件檢視層，繫結點選事件：

-
} 
+

自定義元件邏輯層，定義對應方法。

export default ,
minus(idx) );
},add(idx) );
}}

在自定義元件方法中可進行一些處理，也可通過this.$emit()直接將事件拋給元件使用者進行處理。方法有兩個引數，第乙個引數指定使用元件時的事件名，第二個物件引數將資料傳給使用元件時觸發的事件。

使用自定義元件時，可用"on+方法名"或"@+方法名"繫結事件處理的方法。由自定義元件傳過來的值可通過"event.detail.指定的key"取出。這裡的命名規範和屬性一致，在自定義元件中定義方法採用駝峰命名法，使用元件時繫結方法的屬性使用短橫線分割命名法。

// 減少乙個商品
minuscarts(e) );
} else 
this.updatenumber(idx);}},
// 新增乙個商品
addcarts(e) 
this.updatenumber(idx);
},

大功告成。

自定義元件wxml：

自定義元件js：

component(,
type:,
placeholder:,
name:,
disabled:
},data: ,
methods: 
}})

自定義元件json：

頁面wxml：

頁面js：

page(,
blur(e) )
},}

頁面json：