组件之间通信

监听事件

自定义组件可以触发任意的事件，父组件可以监听这些事件。监听自定义组件事件的方法与监听基础组件事件的方法是一致的。关于事件的基本概念和用法，参见事件系统。

示例代码如下：

<!-- 自定义组件触发“myevent”事件时，调用“myEventListener”方法 -->
<my-component bindmyevent="myEventListener" />
<!-- 也可以写成 -->
<my-component bind:myevent="myEventListener" />

Page({
  myEventListener: function(e){
    console.info(e.detail); // 自定义组件触发事件时提供的detail对象
  }
});

触发事件

自定义组件使用 triggerEvent 触发事件，触发时需要指定事件名和 detail 对象和事件选项。

示例代码如下：

<!-- 在子组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

// 自定义组件 my-component
Component({
  properties: {},
  methods: {
    onTap: function(){
      let myEventDetail = {}; // detail对象，提供给事件监听函数
      let myEventOption = {}; // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption);
    }
  }
});

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

获取组件实例

父组件里可以通过调用 this.selectComponent ，获取子组件的实例对象，调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-cust-component")。

selector详细语法可查看selector语法参考文档。（this.selectComponent暂不支持跨自定义组件的后代选择器语法）

示例代码如下：

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

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

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

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

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

示例代码如下：

// 自定义组件 my-component
Component({
  behaviors: ['has://component-export'],
  export() {
    return { myField: 'myValue' };
  }
});

<!-- 使用自定义组件 -->
<my-component id="my-id" />

Page({
  getChildComponentById: function() {
    // 父组件调用
    const child = this.selectComponent('#my-id'); // 返回 { myField: 'myValue' }
    console.info(child);
  }
});

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