日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：組件間通信與事件
  • 組件間通信與事件
    • 組件間通信
  • 監(jiān)聽事件
  • 通過 dispatch 方法與父組件通信
  • 通過 triggerEvent 方法與父組件通信
  • 通過 this.selectComponent 方法獲取子組件示例對(duì)象

    組件間通信與事件

    組件間通信

    組件間的基本通信方式有以下幾種：

    創(chuàng)新互聯(lián)是一家集做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)站頁面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)絡(luò)公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠(chéng)信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場(chǎng)環(huán)境中,互促共生。

    • 在父組件中可以通過設(shè)置子組件的 properties 來向子組件傳遞數(shù)據(jù)；
    • 在父組件中定義 messages 對(duì)象，對(duì)子組件 dispatch 方法進(jìn)行攔截，從而達(dá)到子組件向上通信；
    • 子組件可以通過 triggerEvent 方法觸發(fā)父組件的自定義事件進(jìn)行傳參；
    • 如果以上幾種方式不足以滿足需要，父組件還可以通過 this.selectComponent 方法獲取子組件實(shí)例對(duì)象，這樣就可以直接訪問組件的任意數(shù)據(jù)和方法。

    監(jiān)聽事件

    解釋：

    事件系統(tǒng)是組件間通信的主要方式之一。自定義組件可以觸發(fā)任意的事件，引用組件的頁面可以監(jiān)聽這些事件。

    監(jiān)聽自定義組件事件的方法與監(jiān)聽基礎(chǔ)組件事件的方法完全一致。

    代碼示例

    • SWAN
     
 
 
      
  
  
  
      2. 
  
  
  
      3.

    通過 dispatch 方法與父組件通信

    通過 dispatch 方法，子組件可以向組件樹的上層派發(fā)消息。消息將沿著組件樹向上傳遞，直到遇到第一個(gè)處理該消息的組件，則停止。
    通過 messages 可以聲明組件要處理的消息，messages 是一個(gè)對(duì)象，key 是消息名稱，value 是消息處理的函數(shù)，接收一個(gè)包含 target（派發(fā)消息的組件）和 value（消息的值）的參數(shù)對(duì)象。

    代碼示例

    在開發(fā)者工具中打開

    在開發(fā)者工具中打開

    在 WEB IDE 中打開

    • JS
     
 
 
      
  
  
  
    1. /* 父組件邏輯 */
      2. 
  
  
  
    2. Component({
      3. 
  
  
  
    3.  messages: {
      4. 
  
  
  
    4.  'childmessage': function (e) {
      5. 
  
  
  
    5.  console.log('childmessage', e);
      6. 
  
  
  
    6.  }
      7. 
  
  
  
    7.  }
      8. 
  
  
  
    8. });
      9. 
  
  
  
      10. 
  
  
  
    10. /* 子組件邏輯 */
      11. 
  
  
  
    11. Component({
      12. 
  
  
  
    12.  created() {
      13. 
  
  
  
    13.  this.dispatch('childmessage', {
      14. 
  
  
  
    14.  name: 'swan'
      15. 
  
  
  
    15.  });
      16. 
  
  
  
    16.  }
      17. 
  
  
  
    17. });
      18.

    通過 triggerEvent 方法與父組件通信

    解釋：自定義組件觸發(fā)事件時(shí)，需要使用 triggerEvent 方法，指定事件名和 detail 對(duì)象：

    • SWAN
     
 
 
      
  
  
  
      2.

    代碼示例

    在開發(fā)者工具中打開

    在開發(fā)者工具中打開

    在 WEB IDE 中打開

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. /* 組件child頁面 */
      2. 
  
  
  
      3. 
 
 
 
     
 
 
      
  
  
  
    1. /* 組件child邏輯 */
      2. 
  
  
  
    2. Component({
      3. 
  
  
  
    3.  properties: {},
      4. 
  
  
  
    4.  methods: {
      5. 
  
  
  
    5.  onTap: function() {
      6. 
  
  
  
    6.  // detail對(duì)象，提供給事件監(jiān)聽函數(shù)
      7. 
  
  
  
    7.  var myEventDetail = {} 
      8. 
  
  
  
    8.  // 觸發(fā)事件的選項(xiàng)
      9. 
  
  
  
    9.  var myEventOption = {bubbles:true} 
      10. 
  
  
  
    10.  this.triggerEvent('myevent', myEventDetail, myEventOption);
      11. 
  
  
  
    11.  }
      12. 
  
  
  
    12.  }
      13. 
  
  
  
    13. });
      14.
    • SWAN
    • JS
     
 
 
      
  
  
  
    1. /* 使用該組件的頁面 */
      2. 
  
  
  
      3. 
 
 
 
     
 
 
      
  
  
  
    1. /* 使用該組件的邏輯 */
      2. 
  
  
  
    2. Page({
      3. 
  
  
  
    3.  listener: function (e) {
      4. 
  
  
  
    4.  console.log(e);
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6. })
      7.

    觸發(fā)事件的選項(xiàng)包括：

    選項(xiàng)名 類型 是否必填 默認(rèn)值 描述
    bubblesBoolean否false事件是否冒泡
    capturePhaseBollean否false事件是否擁有捕獲階段

    關(guān)于自定義組件的冒泡和捕獲階段。

    代碼示例

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3.  
      4. 
  
  
  
      5. 
  
  
  
      6. 
  
  
  
    6.  
      7. 
  
  
  
      8. 
  
  
  
    8.  
      9. 
  
  
  
      10. 
  
  
  
      11. 
  
  
  
    11.  
      12. 
  
  
  
      13. 
  
  
  
    13.  
      14. 
  
  
  
      15. 
 
 
 
     
 
 
      
  
  
  
    1. // 組件 child.js
      2. 
  
  
  
    2. Component({
      3. 
  
  
  
    3.  methods: {
      4. 
  
  
  
    4.  onTap: function() {
      5. 
  
  
  
    5.  // 只會(huì)觸發(fā) pageEventListener2
      6. 
  
  
  
    6.  this.triggerEvent('customevent', {}) 
      7. 
  
  
  
    7.  // this.triggerEvent('customevent', {}, { bubbles: true }) // 會(huì)依次觸發(fā) pageEventListener2 、 pageEventListener1
      8. 
  
  
  
    8.  // this.triggerEvent('customevent', {}, { bubbles: true, capturePhase: true }) // 會(huì)依次觸發(fā) pageEventListener2 、 anotherEventListener 、 pageEventListener1
      9. 
  
  
  
    9.  }
      10. 
  
  
  
    10.  }
      11. 
  
  
  
    11. })
      12.

    通過 this.selectComponent 方法獲取子組件示例對(duì)象

    代碼示例

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2. 這是組件child
      3. 
  
  
  
      4. 
  
  
  
      5. 
  
  
  
    5. 這是使用child
      6. 
 
 
 
     
 
 
      
  
  
  
    1. // 使用該組件的邏輯
      2. 
  
  
  
    2. Page({
      3. 
  
  
  
    3.  onLoad: function () {
      4. 
  
  
  
    4.  const res = this.selectComponent('#page-id');
      5. 
  
  
  
    5.  console.log(res);
      6. 
  
  
  
    6.  }
      7. 
  
  
  
    7. });
      8.

    注意：

    • 對(duì)于 triggerEvent 方法，在基礎(chǔ)庫版本 2.0.3 之前（不包含 2.0.3）只支持傳遞類型為 object 的數(shù)據(jù)，從 2.0.3 開始支持傳遞其它數(shù)據(jù)類型（不包括 function 和 undefined），其它低版本請(qǐng)做好兼容。
    • 對(duì)于很多 UI 組件庫需要實(shí)現(xiàn)組件間關(guān)系，實(shí)際上組件間通信同樣可以滿足此需求。（之前組件間通信無法在存在 slot 環(huán)境使用，我們將于基礎(chǔ)版本庫 3.110.14 修復(fù)此問題）詳細(xì)內(nèi)容
    • 通過 triggerEvent 方式觸發(fā)的自定義事件，只能在擁有父子關(guān)系的組件之間傳播。
    • 只能觸發(fā)綁定在組件自身標(biāo)簽上的事件監(jiān)聽方法。

    分享題目：創(chuàng)新互聯(lián)百度小程序教程：組件間通信與事件
    本文來源：http://m.5511xx.com/article/codejog.html