目錄
1.自定義子組件的配置
2. 自定義子組件生命周期函數
3.父子組件傳值?
3.1 父傳子
3.2 子傳父
1.自定義子組件的配置
- 在components文件中可以創建子組件，首先需要創建一個文件夾，然后右擊文件夾選擇新建Component 選擇這個配置系統不會自動配置路由，選擇新建Page是會生成路由的。
- 在子組件的js文件中有一個Component 組件實例，用于創建組件實例對象，需要注意和Page實例對象進行區分。
-
?properties是組件的屬性列表:類似于vue的props，用于接收父組件的props傳值
??properties:?{//?可以簡寫，也可以通過對象格式來進行編寫。age:?Number,min:?{//?約定值的類型，可以?約定一個，也可以約定一組類型type:?String,//?定義初始值value:?"0",},max:?{type:?[String,?Number],value:?"2",},}, -
???data組件的初始:組件自身的響應式數據，和Page中data用法是一樣的。
??data:?{}, -
methods是組件的方法列表
??methods:?{},在使用子組件時我們需要在對應的.json文件先進行導入子組件的操作，然后再頁面上輸入子組件的標簽進行使用。
{"usingComponents": {"custom-grid": "../../components/grid/grid"},"navigationBarTitleText": "這里是分類頁面","onReachBottomDistance": 50 }<custom-grid></custom-grid>
2. 自定義子組件生命周期函數
(1)created
created類似于vue中的beforeCreate，相同點都是組件實例this剛剛被創建，此時組件的響應式數據及方法都還沒有掛載到this上。在組件實例剛剛被創建時執行，注意此時不能調用setData
?created()?{},? (2)arrached
在組件實例剛剛進入頁面節點樹時執行，類似于vue的created，此時組件的響應式數據及方法都已經掛載到this上，可以發送初始化請求了。
arrached()?{},? (3)ready
在組件布局完成后執行，類似于vue的mounted，此時組件初始掛載完畢，組件創建階段的生命周期結束了。
ready()?{},? (4)detached
組件卸載時的生命周期
detached()?{},? 以上四種是老版本的子組件聲明周期，在新版本中也可以使用，但是更推薦使用lifetimes來編寫子組件的生命周期。注意：lifetimes僅支持2.2.3版本基礎庫以上的新寫法（我們可以在詳情中的本地設置看到調試基礎庫的版本）。
lifetimes:?{//?2.2.3版本基礎庫以上的新寫法（我們可以在詳情中的本地設置看到調試基礎庫的版本）attached:?function?()?{//?在組件實例進入頁面節點樹時執行},datached:?function?()?{//?在組件實例被從頁面節點數移除時執行},},? 我們也可以通過子組件來控制父組件的生命周期，比如當父組件顯示時子組件執行什么操作，或者當父組件隱藏時子組件執行什么操作
//?父組件的生命周期pageLifetimes:?{show()?{},hide()?{},},3.父子組件傳值?
3.1 父傳子
在父組件中直接在子組件對應標簽內部進行傳值，需要注意的是如果傳遞參數是一個變量則需要在變量外加雙大括號，如果是傳遞一個數字類型或者是布爾類型，則不需要可以加雙大括號，小程序會自動識別你在子組件中需要的數據類型，然后自動進行類型轉換（將純數字的字符串轉換為數字，將’true‘或’false‘自動識別為布爾值）。
<custom-grid age='100' min='text' max='abc' bind:setCount="getCount"></custom-grid>在子組件我們需要在通過properties來接受父組件傳遞過來的值。
??properties:?{//?可以簡寫，也可以通過對象格式來進行編寫。age:?Number,min:?{//?約定值的類型，可以?約定一個，也可以約定一組類型type:?String,//?定義初始值value:?"0",},max:?{type:?[String,?Number],value:?"2",},},3.2 子傳父
小程序實現子組件向父組件傳值的原理是和vue是一樣的，都需要通過自定義事件來完成，在小程序中自定義事件是通過bind:事件名="觸發方法名"來實現的。
實現子組件向父組件傳值首先我們需要在父組件設置自定義事件，然后在子組件中綁定一個點擊事件，通過觸發子組件的綁定事件然后通過?this.triggerEvent來調用父組件的自定義事件。
父組件：
<custom-grid age='100' min='text' max='abc' bind:setCount="getCount"></custom-grid>我們從子組件傳過來的是一個對象，通過e.datail才能取到里面的數據。?
getCount(e) {console.log("---", e);this.setData({count: e.detail,});},子組件：?
<button bind:tap="go">發射事件</button>?
methods: {go() {this.triggerEvent("setCount", 1000);},},?
)
