微信小程序組件通信和behavior使用詳解

👀引言

⚓經過web前端開發的學習，相信大傢對於前端開發有瞭一定深入的瞭解，今天我開設瞭微信小程序專欄，主要想從移動端開發方向進一步發展，而對於我來說寫移動端博文的第一站就是小程序開發，希望看到我文章的朋友能對你有所幫助。

🏍️組件通信

🍇父子組件的通信方式

屬性綁定：用於父組件向子組件的指定屬性設置數據，僅能設置JSON兼容的數據。

屬性綁定用於實現父向子傳值，而且隻能傳遞普通類型的數據，無法將方法傳遞給子組件。

事件綁定：用於子組件向父組件傳遞數據，可以傳遞任意數據。

事件綁定用於實現子向父傳值，可以傳遞任何類型的數據，其使用步驟如下：

在父組件的.js中，定義一個函數，這個函數即將通過自定義事件的形式，傳遞給子組件

//和data平齊
syscCount(){
},

在父組件的.wxml中，通過自定義事件的形式，將步驟一定義的函數引用傳遞給子組件

<mydemo4 count="{{count}}" bind:sysc="syscCount"></mydemo4>

在子組件的.js中，通過調用this.triggerEvent('自定義事件名稱',{/*參數對象*/})，將數據發送到父組件

methods: {
  addCount(){
    this.setData({
      count:this.properties.count + 1
    })
    // 觸發自定義事件，將數值同步給父組件
    this.triggerEvent('sysc',{value:this.properties.count})
  }
}

在父組件的.js中，通過e.detail獲取到子組件傳遞過來的數據

//和data平齊
syscCount(e){
  console.log('sysCount!!!');
  // console.log(e.detail.value);
  this.setData({
    count:e.detail.value
  })
},

獲取組件實例：父組件可以通過 this.selectComponent() 獲取子組件實例對象，這樣可以直接訪問子組件的任意數據和方法。

可在父組件裡調用 this.selectComponent( id 或 class選擇器)，獲取子組件的實例對象，從而直接訪問子組件的任意數據和方法。調用時需要傳入一個選擇器。

//.wxml
<mydemo4 count="{{count}}" bind:sysc="syscCount" class="child" id="childId"></mydemo4>
<view>-------</view>
<view>父組件中，count的值是：{{count}}</view>
<button bindtap="getChild">獲取子組件的實例對象</button>
 
//.js
getChild(){ //按鈕的 tap 處理函數
  // 切記下面參數不能傳遞標簽選擇器，隻能的id或者class，否則會返回 null
  const child = this.selectComponent('.child')
  // console.log(child);
  // child.setData({
  //   count:child.properties.count + 1
  // })
  child.addCount()
}

🏍️behaviors

behaviors是小程序中，用於實現組件間代碼共享的特性，類似於 Vue.js 中的 “mixins”。

🍇behaviors工作方式

每個 behaviors 可以包含一組屬性、數據、生命周期函數和方法。組件引用它時，它的屬性、數據和方法會被合並到組件中，每個組件可以引用多個behaviors，behavior也可以引用其它behavior。

🍈創建 behavior

調用 Behavior (Object object) 方法，即可創建一個共享的 behavior 實例對象，供所有組件使用：

//調用 Behavior() 方法，創建實例對象並使用 module.exports 把 behavior 實例對象共享出去
module.exports = Behavior({
  // 屬性節點
  properties:{},
  // 私有數據節點
  data:{
    username:'zs'
  },
  // 事件處理函數和自定義方法
  methods:{},
  // 其他節點。。。
})

🍉導入並使用 behavior

在組件中，使用 require() 方法導入需要的 behavior，掛載後即可訪問 behavior 中的數據和方法。

// 使用 require() 導入需要的自定義 behavior 模塊
const myBehavior = require('../../behaviors/my-behaviors')
 
Component({
  // 將導入的 behavior 實例對象掛載到 behavior 數組節點中，即可生效
  behaviors:[myBehavior],
})

🍊behavior中所有可用的節點

🍋同名字段的覆蓋和組合規則

組件和它引用的 behavior 中可以包含同名字段，對這些處理的字段有如下三種同名處理規則：

同名的數據字段（data）:

若同名的數據字段都是對象類型，會進行對象合並;

其餘情況會進行數據覆蓋，覆蓋規則為： 引用者 behavior > 被引用的 behavior 、 靠後的 behavior > 靠前的 behavior。（優先級高的覆蓋優先級低的，最大的為優先級最高）;

同名的屬性（properties）或方法（methods）：

若組件本身有這個屬性或方法，則組件的屬性或方法會覆蓋 behavior 中的同名屬性或方法；

若組件本身無這個屬性或方法，則在組件的 behaviors 字段中定義靠後的 behavior 的屬性或方法會覆蓋靠前的同名屬性或方法；

在 2 的基礎上，若存在嵌套引用 behavior 的情況，則規則為：引用者 behavior 覆蓋 被引用的 behavior 中的同名屬性或方法。

同名的生命周期函數：

對於不同的生命周期函數之間，遵循組件生命周期函數的執行順序；

對於同種生命周期函數和同字段 observers ，遵循如下規則：

behavior 優先於組件執行；

被引用的 behavior 優先於 引用者 behavior 執行；

靠前的 behavior 優先於 靠後的 behavior 執行；

如果同一個 behavior 被一個組件多次引用，它定義的生命周期函數和 observers 不會重復執行。

到此這篇關於微信小程序組件通信和behavior使用的文章就介紹到這瞭,更多相關小程序組件通信內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

• 微信小程序如何實現數據共享與方法共享詳解
• 微信小程序實現照片裁剪
• 微信小程序中正確使用地圖的方法實例
• 微信小程序獲取手機驗證碼的方法
• 小程序獲取用戶信息的兩種方法詳解(getUserProfile和頭像昵稱填寫)