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

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

    组件间通信与事件

    组件间通信

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

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

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

    监听事件

    解释：

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

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

    代码示例

    • SWAN
     
 
 
      
  
  
  
      2. 
  
  
  
      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
     
 
 
      
  
  
  
      2.

    代码示例

    在开发者工具中打开

    在开发者工具中打开

    在 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对象，提供给事件监听函数
      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. 
  
  
  
      3. 
 
 
 
     
 
 
      
  
  
  
    1. /* 使用该组件的逻辑 */
      2. 
  
  
  
    2. Page({
      3. 
  
  
  
    3.  listener: function (e) {
      4. 
  
  
  
    4.  console.log(e);
      5. 
  
  
  
    5.  }
      6. 
  
  
  
    6. })
      7.

    触发事件的选项包括：

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

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

    代码示例

    • 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.  // 只会触发 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
     
 
 
      
  
  
  
      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.

    注意：

    • 对于 triggerEvent 方法，在基础库版本 2.0.3 之前（不包含 2.0.3）只支持传递类型为 object 的数据，从 2.0.3 开始支持传递其它数据类型（不包括 function 和 undefined），其它低版本请做好兼容。
    • 对于很多 UI 组件库需要实现组件间关系，实际上组件间通信同样可以满足此需求。（之前组件间通信无法在存在 slot 环境使用，我们将于基础版本库 3.110.14 修复此问题）详细内容
    • 通过 triggerEvent 方式触发的自定义事件，只能在拥有父子关系的组件之间传播。
    • 只能触发绑定在组件自身标签上的事件监听方法。

    网页标题：创新互联百度小程序教程：组件间通信与事件
    URL链接：http://www.shufengxianlan.com/qtweb/news17/214567.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    标签优化知识

    分类信息网

    重庆电信五里店机房　　 　成都定制网站　　 　营销型网站　　 　成都服务器机柜租用　　 　成都app软件开发公司　　 　乐山中领科信　　 　定制网站建设　　 　明安消防器材　　 　富顺网站建设　　 　H5建站　　 　普能电气　　 　教育建设方案　　 　成都全屋定制　　 　成都商城开发　　 　电信机房托管服务器　　 　网站改版维护　　 　高端网站设计　　 　手机网站建设　　 　成都成品网站　　 　酒柜书柜鞋柜定制