后浪云百度小程序教程：组件间通信与事件

2022-8-12
  • 组件间通信与事件
    • 组件间通信
  • 监听事件
  • 通过 dispatch 方法与父组件通信
  • 通过 triggerEvent 方法与父组件通信
  • 通过 this.selectComponent 方法获取子组件示例对象

    组件间通信与事件

    组件间通信

    组件间的基本通信方式有以下几种：

    • 在父组件中可以通过设置子组件的 properties 来向子组件传递数据；
    • 在父组件中定义 messages 对象，对子组件 dispatch 方法进行拦截，从而达到子组件向上通信；
    • 子组件可以通过 triggerEvent 方法触发父组件的自定义事件进行传参；
    • 如果以上几种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

    监听事件

    解释：

    事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。

    监听自定义组件事件的方法与监听基础组件事件的方法完全一致。

    代码示例

    • SWAN
     
 
 
      
  
  
  
    1. <!-- 父组件模板 -->
      2. 
  
  
  
    2. <component-tag-name bindmyevent="onMyEvent" />
      3.

    通过 dispatch 方法与父组件通信

    通过 dispatch 方法，子组件可以向组件树的上层派发消息。消息将沿着组件树向上传递，直到遇到第一个处理该消息的组件，则停止。
    通过 messages 可以声明组件要处理的消息，messages 是一个对象，key 是消息名称，value 是消息处理的函数，接收一个包含 target（派发消息的组件）和 value（消息的值）的参数对象。

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 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 方法与父组件通信

    解释：自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名和 detail 对象：

    • SWAN
     
 
 
      
  
  
  
    1. <button bindtap="onTap">点击这个按钮将触发 myevent 事件</button>
      2.

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. /* 组件child页面 */
      2. 
  
  
  
    2. <button bindtap="onTap">点击这个按钮将触发 myevent 事件</button>
      3. 
 
 
 
     
 
 
      
  
  
  
    1. /* 组件child逻辑 */
      2. 
  
  
  
    2. Component({
      3. 
  
  
  
    3.  properties: {},
      4. 
  
  
  
    4.  methods: {
      5. 
  
  
  
    5.  onTap: function() {
      6. 
  
  
  
    6.  // detail对象，提供给事件监听函数
      7. 
  
  
  
    7.  var myEventDetail = {} 
      8. 
  
  
  
    8.  // 触发事件的选项
      9. 
  
  
  
    9.  var myEventOption = {bubbles:true} 
      10. 
  
  
  
    10.  this.triggerEvent('myevent', myEventDetail, myEventOption);
      11. 
  
  
  
    11.  }
      12. 
  
  
  
    12.  }
      13. 
  
  
  
    13. });
      14.
    • SWAN
    • JS
     
 
 
      
  
  
  
    1. /* 使用该组件的页面 */
      2. 
  
  
  
    2. <child bindmyevent="listener"></child>
      3. 
 
 
 
     
 
 
      
  
  
  
    1. /* 使用该组件的逻辑 */
      2. 
  
  
  
    2. Page({
      3. 
  
  
  
    3.  listener: function (e) {
      4. 
  
  
  
    4.  console.log(e);
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6. })
      7.

    触发事件的选项包括：

    选项名 类型 是否必填 默认值 描述
    bubbles Boolean 否 false 事件是否冒泡
    capturePhase Bollean 否 false 事件是否拥有捕获阶段

    关于自定义组件的冒泡和捕获阶段。

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <!-- 页面 index.swan -->
      2. 
  
  
  
    2. <parent bindcustomevent="pageEventListener1">
      3. 
  
  
  
    3.  <child bindcustomevent="pageEventListener2"></child>
      4. 
  
  
  
    4. </parent>
      5. 
  
  
  
      6. 
  
  
  
    6.  <!-- 组件 parent.swan -->
      7. 
  
  
  
    7. <view bindcustomevent="anotherEventListener">
      8. 
  
  
  
    8.  <slot />
      9. 
  
  
  
    9. </view>
      10. 
  
  
  
      11. 
  
  
  
    11.  <!-- 组件 child.swan -->
      12. 
  
  
  
    12. <view bindcustomevent="myEventListener">
      13. 
  
  
  
    13.  <button bindtap="onTap">点我触发</button>
      14. 
  
  
  
    14. </view>
      15. 
 
 
 
     
 
 
      
  
  
  
    1. // 组件 child.js
      2. 
  
  
  
    2. Component({
      3. 
  
  
  
    3.  methods: {
      4. 
  
  
  
    4.  onTap: function() {
      5. 
  
  
  
    5.  // 只会触发 pageEventListener2
      6. 
  
  
  
    6.  this.triggerEvent('customevent', {}) 
      7. 
  
  
  
    7.  // this.triggerEvent('customevent', {}, { bubbles: true }) // 会依次触发 pageEventListener2 、 pageEventListener1
      8. 
  
  
  
    8.  // this.triggerEvent('customevent', {}, { bubbles: true, capturePhase: true }) // 会依次触发 pageEventListener2 、 anotherEventListener 、 pageEventListener1
      9. 
  
  
  
    9.  }
      10. 
  
  
  
    10.  }
      11. 
  
  
  
    11. })
      12.

    通过 this.selectComponent 方法获取子组件示例对象

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
    1. <!-- 组件child页面 -->
      2. 
  
  
  
    2. <view>这是组件child</view>
      3. 
  
  
  
      4. 
  
  
  
    4. <!-- 使用child的页面 -->
      5. 
  
  
  
    5. <child id="page-id">这是使用child</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.

    注意：

    • 对于 triggerEvent 方法，在基础库版本 2.0.3 之前（不包含 2.0.3）只支持传递类型为 object 的数据，从 2.0.3 开始支持传递其它数据类型（不包括 function 和 undefined），其它低版本请做好兼容。
    • 对于很多 UI 组件库需要实现组件间关系，实际上组件间通信同样可以满足此需求。（之前组件间通信无法在存在 slot 环境使用，我们将于基础版本库 3.110.14 修复此问题）详细内容
    • 通过 triggerEvent 方式触发的自定义事件，只能在拥有父子关系的组件之间传播。
    • 只能触发绑定在组件自身标签上的事件监听方法。
    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186179/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图