??引言

?經(jīng)過web前端開發(fā)的學(xué)習(xí)，相信大家對于前端開發(fā)有了一定深入的了解，今天我開設(shè)了微信小程序?qū)?，主要想從移動端開發(fā)方向進(jìn)一步發(fā)展，而對于我來說寫移動端博文的第一站就是小程序開發(fā)，希望看到我文章的朋友能對你有所幫助。

???組件通信

??父子組件的通信方式

屬性綁定：用于父組件向子組件的指定屬性設(shè)置數(shù)據(jù)，僅能設(shè)置JSON兼容的數(shù)據(jù)。

屬性綁定用于實(shí)現(xiàn)父向子傳值，而且只能傳遞普通類型的數(shù)據(jù)，無法將方法傳遞給子組件。

事件綁定：用于子組件向父組件傳遞數(shù)據(jù)，可以傳遞任意數(shù)據(jù)。

事件綁定用于實(shí)現(xiàn)子向父傳值，可以傳遞任何類型的數(shù)據(jù)，其使用步驟如下：

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

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

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

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

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

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

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

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

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

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

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

???behaviors

behaviors是小程序中，用于實(shí)現(xiàn)組件間代碼共享的特性，類似于 Vue.js 中的 “mixins”。

??behaviors工作方式

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

??創(chuàng)建 behavior

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

//調(diào)用 Behavior() 方法，創(chuàng)建實(shí)例對象并使用 module.exports 把 behavior 實(shí)例對象共享出去
module.exports = Behavior({
  // 屬性節(jié)點(diǎn)
  properties:{},
  // 私有數(shù)據(jù)節(jié)點(diǎn)
  data:{
    username:'zs'
  },
  // 事件處理函數(shù)和自定義方法
  methods:{},
  // 其他節(jié)點(diǎn)。。。
})

??導(dǎo)入并使用 behavior

在組件中，使用 require() 方法導(dǎo)入需要的 behavior，掛載后即可訪問 behavior 中的數(shù)據(jù)和方法。

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

??behavior中所有可用的節(jié)點(diǎn)

??同名字段的覆蓋和組合規(guī)則

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

同名的數(shù)據(jù)字段（data）:

若同名的數(shù)據(jù)字段都是對象類型，會進(jìn)行對象合并;

其余情況會進(jìn)行數(shù)據(jù)覆蓋，覆蓋規(guī)則為： 引用者 behavior > 被引用的 behavior 、 靠后的 behavior > 靠前的 behavior。（優(yōu)先級高的覆蓋優(yōu)先級低的，最大的為優(yōu)先級最高）;

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

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

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

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

同名的生命周期函數(shù)：

對于不同的生命周期函數(shù)之間，遵循組件生命周期函數(shù)的執(zhí)行順序；

對于同種生命周期函數(shù)和同字段 observers ，遵循如下規(guī)則：

behavior 優(yōu)先于組件執(zhí)行；

被引用的 behavior 優(yōu)先于 引用者 behavior 執(zhí)行；

靠前的 behavior 優(yōu)先于 靠后的 behavior 執(zhí)行；

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

到此這篇關(guān)于微信小程序組件通信和behavior使用的文章就介紹到這了,更多相關(guān)小程序組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論