??引言

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

???組件通信

??父子組件的通信方式

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

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

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

事件綁定用于實(shí)現(xiàn)子向父?jìng)髦担梢詡鬟f任何類(lèi)型的數(shù)據(jù)，其使用步驟如下：

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

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

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

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

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

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

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

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

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

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

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

???behaviors

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

??behaviors工作方式

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

??創(chuàng)建 behavior

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

//調(diào)用 Behavior() 方法，創(chuàng)建實(shí)例對(duì)象并使用 module.exports 把 behavior 實(shí)例對(duì)象共享出去
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，掛載后即可訪問(wèn) behavior 中的數(shù)據(jù)和方法。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論