🎁寫在前面：

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

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

文章目錄

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

一，組件的數據和方法

自定義組件的數據和方法在使用上，和Vue的組件十分相似，不過也有一點區別，首先我們來了解一下組件私有數據的定義。

1.1 data數據

data中的數據就作為組件的私有數據使用，定義在對應自定義組件js文件下的component構造器中，語法如下：

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

這樣我們就給組件定義了兩個數據，在模板在我們可以直接{{a}}調用，而在component構造器中，我們也只需this.a便可獲取到該數據。

1.2 methods方法

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

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

不過，在開發中會將methods方法分為事件處理函數和自定義方法，事件處理函數是監聽事件，當事件觸發再調用。而自定義方法則是由我們自己調用。

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

1.3 properties屬性

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

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

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

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

回歸正題，如何在組件中接收這個數據呢？

如果你想給properties中 的數據定義默認值，若沒有傳值，則用默認值賦值，那么你需要用完整格式

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

如果不需要賦默認值，就可以使用簡化格式

properties : {username : String }

如何修改：

我們還是可以直接調用this.setData方法進行修改。

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

二，數據監聽器

數據監聽器其實類似于Vue的watch監聽屬性

我們可以選擇對某個數據進行監聽， 當發生變化時，調用對應的回調函數

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

一個回調函數可以對應監聽多個，只需要添加對應參數即可。

監聽對象屬性字段：

當我們想要監聽對象里面的數據，只需要用obj.username代替上面的username即可。

需要注意的是，監聽對象屬性的觸發情況，不僅有this.setData方法改變對象屬性值觸發，直接給對象賦值也會觸發。

三，純數據字段

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

使用方法：

在 Component 構造器的 options 定義段中指定 pureDataPattern 為一個正則表達式，字段名符合這個正則表達式的字段將成為純數據字段

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

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

四，組件的生命周期

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

4.1 生命周期闡述

組件的生命周期按時間順序有：

鉤子說明

created	Component實例創建時調用
attached	實例進入頁面節點樹
ready	在組件在視圖層布局完成后執行
moved	在組件實例被移動到節點樹另一個位置時執行
detached	在組件實例被從頁面節點樹移除時執行
error	組件方法拋出錯誤時

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

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

4.2 定義生命周期

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

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

4.2 監聽組件所在頁面的生命周期

有時，組件的一些行為需要依賴所在頁面生命周期調用的時機，如觸發頁面的show時，組件想要顯示出歡迎回來的字樣

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

pageLifetimes : {show : function(){//觸發時調用} }

注意：

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

今天的小程序文章到這里就結束啦，如果覺得對您有幫助的話，可以關注牛牛接下來的文章

感謝您的支持，您的支持是我們創作的最大動力！！！

債見~~

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。