×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：组件间通信与事件

组件间通信与事件

组件间通信

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

创新互联是一家集做网站、成都网站建设、网站页面设计、网站优化SEO优化为一体的专业网络公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

监听事件

解释：

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

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

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
    3.

通过 dispatch 方法与父组件通信

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

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
  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 对象：

 
 
 
    
  
  
  
    2.

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
  1. /* 组件child页面 */
    2. 
  
  
  
    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. 
 
 
 
 
 
 
    
  
  
  
  1. /* 使用该组件的页面 */
    2. 
  
  
  
    3. 
 
 
 
 
 
 
    
  
  
  
  1. /* 使用该组件的逻辑 */
    2. 
  
  
  
  2. Page({
    3. 
  
  
  
  3.  listener: function (e) {
    4. 
  
  
  
  4.  console.log(e);
    5. 
  
  
  
  5.  }
    6. 
  
  
  
  6. })
    7.

触发事件的选项包括：

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

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

代码示例

 
 
 
    
  
  
  
    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.  // 只会触发 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 方法获取子组件示例对象

代码示例

 
 
 
    
  
  
  
    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.

注意：


分享文章：创新互联百度小程序教程：组件间通信与事件
文章路径：http://cdbrznjsb.com/article/codejog.html

其他资讯

让你的专属顾问为你服务