微信小程序組件通信和behavior如何使用

這篇文章主要講解了“微信小程序組件通信和behavior如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序組件通信和behavior如何使用”吧！

組件通信

父子組件的通信方式

屬性綁定：用于父組件向子組件的指定屬性設置數據，僅能設置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如何使用”的內容了，經過本文的學習后，相信大家對微信小程序組件通信和behavior如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！