一、自定義組件
1、什么是自定義組件?
? ?? ?小程序中常常會有一些通用的交互模塊,比如“下拉選擇列表”、“搜索框”、“日期選擇器”等。這些界面交互模塊可能會在多個頁面中用到,邏輯也相對獨立。然而,用傳統(tǒng)的小程序開發(fā)方法來實現這樣的模塊是非常繁瑣的。面對這個情況,小程序基礎庫提供了讓開發(fā)者自己創(chuàng)建界面組件的特性,稱之為“自定義組件”。通過這個特性,開發(fā)者就能夠將這樣的交互模塊抽象成界面組件,使界面代碼組織變得非常靈活。
2、使用場景
- (1) 多個頁面用到同樣的東西
- (2) 頁面功能很多,很復雜,使用組件來拆分邏輯
3、自定義組件組成
(1)json文件 用于于放置一些最基本的組件配置
(2)wxml 文件 組件模版
(3)wxss 文件 組件的樣式(無法直接使用全局樣式,需要通過@import導入)
(4)js 文件 組件的 JS 代碼,承載組件的主要邏輯
(這四個文件與編寫一個頁面時用到的四個文件非常類似,但也有區(qū)別。下面將介紹如何利用這四個文件編寫一個簡單的自定義組件。)
4、使用組件
-
(1)新建自定義組件文件
-
在根目錄新建components文件夾,然后右鍵新建自定義組件目錄,最后右鍵新建Component
新建自定義組件
-
- (2)組件json文件配置
{
"component": true 這一組文件設為自定義組件
}
- (3)組件wxml編寫
<!-- 子組件 -->
<view>我是子組件</view>
- (4)組件wxss文件,因為無法直接使用全局樣式,需要導入
/* 自定義組件 */
@import "../../app.wxss";
-
(5)導入自定義組件
- (5.1)在父組件json文件的usingComponents中導入組件
{ "usingComponents": { "submit-bar":"../../components/submit-bar/index" 類似Vue中的導入組件:import xxx from '組件路徑' } }
- (5.2)在父組件wxml文件中以組件名作為標簽使用組件
<submit-bar></submit-bar>
效果圖
二、父子組件通信
(與Vue父子組件傳參原理一樣,學過Vue的盆友更容易上手哦)
1、父傳子
- (1)在父組件中的子組件標簽添加屬性,給子組件傳遞數據
<submit-bar totalMoney="{{totalMoney}}" ></submit-bar>
- (2)子組件在js中通過properties接收,可以指定接收數據類型
properties: {
totalMoney: Number
}
2、子傳父
- (1)在父組件的子組件標簽自定義事件,傳給子組件
<submit-bar bind:submit="submit" ></submit-bar>
- (2)子組件用
this.triggerEvent('父組件自定義事件', '要傳遞的參數')
,觸發(fā)父組件傳過來的自定義事件
this.triggerEvent("submit", 'Hello Grayly')
-
(3)第二步執(zhí)行后,父組件自定義事件綁定的函數就會執(zhí)行,同時接受子組件傳過來的數據
(在event.detail中可得到子組件傳過來的參數)
submit(event) {
console.log(event);
},
父組件接收到子組件傳過來的參數