微信小程序组件间通信与事件

以你之姓@ 2021-09-08 20:12 448阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

**组件间通信**

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

*  WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 [2.0.9][] 开始，还可以在数据中包含函数）。具体在 [组件模板和样式][Link 1] 章节中介绍。
 *  事件：用于子组件向父组件传递数据，可以传递任意数据。
 *  如果以上两种方式不足以满足需要，父组件还可以通过 `this.selectComponent` 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

**监听事件**

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。关于事件的基本概念和用法，参见 [事件][Link 2] 。

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

**代码示例：**

<component-tag-name bindmyevent="onMyEvent" />
    
    <component-tag-name bind:myevent="onMyEvent" />
    Page({
      onMyEvent: function(e){
        e.detail // 自定义组件触发事件时提供的detail对象
      }
    })

**触发事件**

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

**代码示例：**

[在开发者工具中预览效果][Link 3]

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mXval9iB-1624959756786)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210628080413568.png)\]][img-mXval9iB-1624959756786_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210628080413568.png]

<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
    Component({
      properties: {},
      methods: {
        onTap: function(){
          var myEventDetail = {} // detail对象，提供给事件监听函数
          var myEventOption = {} // 触发事件的选项
          this.triggerEvent('myevent', myEventDetail, myEventOption)
        }
      }
    })

触发事件的选项包括：

<table> 
 <thead> 
  <tr> 
   <th align="left">选项名</th> 
   <th align="left">类型</th> 
   <th align="left">是否必填</th> 
   <th align="left">默认值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">bubbles</td> 
   <td align="left">Boolean</td> 
   <td align="left">否</td> 
   <td align="left">false</td> 
   <td align="left">事件是否冒泡</td> 
  </tr> 
  <tr> 
   <td align="left">composed</td> 
   <td align="left">Boolean</td> 
   <td align="left">否</td> 
   <td align="left">false</td> 
   <td align="left">事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部</td> 
  </tr> 
  <tr> 
   <td align="left">capturePhase</td> 
   <td align="left">Boolean</td> 
   <td align="left">否</td> 
   <td align="left">false</td> 
   <td align="left">事件是否拥有捕获阶段</td> 
  </tr> 
 </tbody> 
</table>

关于冒泡和捕获阶段的概念，请阅读 [事件][Link 2] 章节中的相关说明。

**代码示例：**

[在开发者工具中预览效果][Link 4]

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AbEW5Gt4-1624959756787)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210628080554069.png)\]][img-AbEW5Gt4-1624959756787_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210628080554069.png]

// 页面 page.wxml
    <another-component bindcustomevent="pageEventListener1">
      <my-component bindcustomevent="pageEventListener2"></my-component>
    </another-component>
    // 组件 another-component.wxml
    <view bindcustomevent="anotherEventListener">
      <slot />
    </view>
    // 组件 my-component.wxml
    <view bindcustomevent="myEventListener">
      <slot />
    </view>
    // 组件 my-component.js
    Component({
      methods: {
        onTap: function(){
          this.triggerEvent('customevent', {}) // 只会触发 pageEventListener2
          this.triggerEvent('customevent', {}, { bubbles: true }) // 会依次触发 pageEventListener2 、 pageEventListener1
          this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 会依次触发 pageEventListener2 、 anotherEventListener 、 pageEventListener1
        }
      }
    })

**获取组件实例**

可在父组件里调用 `this.selectComponent` ，获取子组件的实例对象。

调用时需要传入一个匹配选择器 `selector`，如：`this.selectComponent(".my-component")`。

`selector` 详细语法可查看 [selector 语法参考文档][selector]。

**代码示例：**

[在开发者工具中预览效果][Link 5]

运行效果：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B6pLOQmR-1624959756789)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210628080659947.png)\]

// 父组件
    Page({ 
      data: { },
      getChildComponent: function () { 
        const child = this.selectComponent('.my-component');
        console.log(child)
      }
    })

在上例中，父组件将会获取 `class` 为 `my-component` 的子组件实例对象，即子组件的 `this` 。

**注意** ：默认情况下，小程序与插件之间、不同插件之间的组件将无法通过 `selectComponent` 得到组件实例（将返回 `null`）。如果想让一个组件在上述条件下依然能被 `selectComponent` 返回，可以自定义其返回结果（见下）。

**自定义的组件实例获取结果**

若需要自定义 `selectComponent` 返回的数据，可使用内置 `behavior`: `wx://component-export`

从基础库版本 [2.2.3][2.0.9] 开始提供支持。

使用该 behavior 时，自定义组件中的 `export` 定义段将用于指定组件被 `selectComponent` 调用时的返回值。

**代码示例：**

[在开发者工具中预览效果][Link 6]

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FsyjWXnF-1624959756789)(C:\\Users\\java1234\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210628080805688.png)\]][img-FsyjWXnF-1624959756789_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210628080805688.png]

// 自定义组件 my-component 内部
    Component({ 
      behaviors: ['wx://component-export'],
      export() { 
        return {  myField: 'myValue' }
      }
    })
    
    <my-component id="the-id" />
    // 父组件调用
    const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }

在上例中，父组件获取 `id` 为 `the-id` 的子组件实例的时候，得到的是对象 `{ myField: 'myValue' }` 。

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[2.0.9]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
[Link 3]: https://developers.weixin.qq.com/s/DFfYSKmI6vZD
[img-mXval9iB-1624959756786_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210628080413568.png]: /images/20210901/80f7d0d36953411db92be4100be03839.png
[Link 4]: https://developers.weixin.qq.com/s/UGfljKm66zZ1
[img-AbEW5Gt4-1624959756787_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210628080554069.png]: /images/20210901/8d4f44e3fedf4f63aeec6e2a461699f5.png
[selector]: https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.select.html
[Link 5]: https://developers.weixin.qq.com/s/oQ64sFmm7rhD
[Link 6]: https://developers.weixin.qq.com/s/ZtosuRmK741Y
[img-FsyjWXnF-1624959756789_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210628080805688.png]: /images/20210901/b7272cabcef64de6a561f89577428033.png