🎁寫在前面：

觀眾老爺們好呀，這里是前端小劉不怕牛牛頻道，小程序系列文章又更新了呀。

上文我們講解了微信小程序自定義組件的入門知識(shí)，那么今天牛牛就來講講自定義組件的進(jìn)階知識(shí)吧，趕緊拿起小本本做筆記呀！

文章目錄

• • 一，組件的數(shù)據(jù)和方法
  • • 1.1 data數(shù)據(jù)
    • 1.2 methods方法
    • 1.3 properties屬性
  • 二，數(shù)據(jù)監(jiān)聽器
  • 三，純數(shù)據(jù)字段
  • 四，組件的生命周期
  • • 4.1 生命周期闡述
    • 4.2 定義生命周期
    • 4.2 監(jiān)聽組件所在頁面的生命周期

一，組件的數(shù)據(jù)和方法

自定義組件的數(shù)據(jù)和方法在使用上，和Vue的組件十分相似，不過也有一點(diǎn)區(qū)別，首先我們來了解一下組件私有數(shù)據(jù)的定義。

1.1 data數(shù)據(jù)

data中的數(shù)據(jù)就作為組件的私有數(shù)據(jù)使用，定義在對(duì)應(yīng)自定義組件js文件下的component構(gòu)造器中，語法如下：

Component({data : {a : 10,b : 20} })

這樣我們就給組件定義了兩個(gè)數(shù)據(jù)，在模板在我們可以直接{{a}}調(diào)用，而在component構(gòu)造器中，我們也只需this.a便可獲取到該數(shù)據(jù)。

1.2 methods方法

methods中方法的定義也是與Vue十分相似，位置與上述的data同級(jí)，語法如下：

Component({methods : {// 定義一個(gè)isShow函數(shù)isShow(){// do something}} })

不過，在開發(fā)中會(huì)將methods方法分為事件處理函數(shù)和自定義方法，事件處理函數(shù)是監(jiān)聽事件，當(dāng)事件觸發(fā)再調(diào)用。而自定義方法則是由我們自己調(diào)用。

在命名上，建議methods中的自定義方法以_開頭，以便區(qū)分。

1.3 properties屬性

properties可以稱之為對(duì)外屬性，用來接收外界傳遞給組件的數(shù)據(jù)。而這個(gè)外界就是父組件，也就是說在頁面引用自定義組件的時(shí)候，可以同時(shí)傳遞數(shù)據(jù)進(jìn)去，組件就會(huì)通過properties屬性接收傳進(jìn)來的數(shù)據(jù)。

<son-view username='niuniu'></son-view>

學(xué)過Vue的小伙伴可能就說了，這不就是Vue的props屬性嗎。

對(duì)，但不完全對(duì)。在微信小程序中，properties屬性里的數(shù)據(jù)也是可以修改的，這是需要注意的地方。

回歸正題，如何在組件中接收這個(gè)數(shù)據(jù)呢？

如果你想給properties中 的數(shù)據(jù)定義默認(rèn)值，若沒有傳值，則用默認(rèn)值賦值，那么你需要用完整格式

properties : {username : {type: String,value : xiaoliu} }

如果不需要賦默認(rèn)值，就可以使用簡(jiǎn)化格式

properties : {username : String }

如何修改：

我們還是可以直接調(diào)用this.setData方法進(jìn)行修改。

this.setData({username : this.username.slice(0, -1)})

二，數(shù)據(jù)監(jiān)聽器

數(shù)據(jù)監(jiān)聽器其實(shí)類似于Vue的watch監(jiān)聽屬性

我們可以選擇對(duì)某個(gè)數(shù)據(jù)進(jìn)行監(jiān)聽， 當(dāng)發(fā)生變化時(shí)，調(diào)用對(duì)應(yīng)的回調(diào)函數(shù)

Component({observers : {'username' : function(username){}} })

一個(gè)回調(diào)函數(shù)可以對(duì)應(yīng)監(jiān)聽多個(gè)，只需要添加對(duì)應(yīng)參數(shù)即可。

監(jiān)聽對(duì)象屬性字段：

當(dāng)我們想要監(jiān)聽對(duì)象里面的數(shù)據(jù)，只需要用obj.username代替上面的username即可。

需要注意的是，監(jiān)聽對(duì)象屬性的觸發(fā)情況，不僅有this.setData方法改變對(duì)象屬性值觸發(fā)，直接給對(duì)象賦值也會(huì)觸發(fā)。

三，純數(shù)據(jù)字段

簡(jiǎn)而言之，在data的數(shù)據(jù)，不用于界面的渲染，也不傳遞給其他組件，僅在組件內(nèi)部使用，我們便可把他定義為純數(shù)據(jù)字段，這樣做的作用就是提升頁面更新的性能

使用方法：

在 Component 構(gòu)造器的 options 定義段中指定 pureDataPattern 為一個(gè)正則表達(dá)式，字段名符合這個(gè)正則表達(dá)式的字段將成為純數(shù)據(jù)字段

比如我想要讓開頭是_的字段名作為純數(shù)據(jù)字段，我可以這樣做。

Component({options : {pureDataPattern : /^_/} })

四，組件的生命周期

前面我們提過小程序的生命周期、頁面的生命周期，組件的生命周期的作用與前兩者一樣，幫助程序員在特定的時(shí)間點(diǎn)處理一些事情。

4.1 生命周期闡述

組件的生命周期按時(shí)間順序有：

鉤子說明

created	Component實(shí)例創(chuàng)建時(shí)調(diào)用
attached	實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹
ready	在組件在視圖層布局完成后執(zhí)行
moved	在組件實(shí)例被移動(dòng)到節(jié)點(diǎn)樹另一個(gè)位置時(shí)執(zhí)行
detached	在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
error	組件方法拋出錯(cuò)誤時(shí)

對(duì)于組件來說，最重要的生命周期是 created 、attached、 detached

• created調(diào)用時(shí)，組件實(shí)例剛創(chuàng)建，不能用setData，通常只是給this添加一些自定義的屬性字段
• 當(dāng)attached調(diào)用時(shí)，this.data初始化完畢，這時(shí)候我們可以做一些初始化工作，比如發(fā)送請(qǐng)求獲取初始數(shù)據(jù)
• 而當(dāng)detached調(diào)用時(shí)，退出頁面，此時(shí)可以做一些清理性質(zhì)的工作

4.2 定義生命周期

定義生命周期的方法有新舊兩種，舊的方法和Vue一樣，直接在Component里面定義（第二級(jí)）。

而新的方法則是需要在Component中的lifetimes中定義，建議使用新的方法定義生命周期。

4.2 監(jiān)聽組件所在頁面的生命周期

有時(shí)，組件的一些行為需要依賴所在頁面生命周期調(diào)用的時(shí)機(jī)，如觸發(fā)頁面的show時(shí)，組件想要顯示出歡迎回來的字樣

這時(shí)候，我們可以在組件中監(jiān)聽頁面的生命周期，只需要在Component的pageLifetimes中定義即可。

pageLifetimes : {show : function(){//觸發(fā)時(shí)調(diào)用} }

注意：

組件只可訪問show、hide、resize三個(gè)頁面生命周期

今天的小程序文章到這里就結(jié)束啦，如果覺得對(duì)您有幫助的話，可以關(guān)注牛牛接下來的文章

感謝您的支持，您的支持是我們創(chuàng)作的最大動(dòng)力！！！

債見~~

總結(jié)

以上是生活随笔為你收集整理的【微信小程序】自定义组件（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。