微信小程序组件间关系

Love The Way You Lie 2021-09-08 20:18 474阅读 0赞

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

**定义和使用组件间关系**

有时需要实现这样的组件：

<custom-ul>
      <custom-li> item 1 </custom-li>
      <custom-li> item 2 </custom-li>
    </custom-ul>

这个例子中， `custom-ul` 和 `custom-li` 都是自定义组件，它们有相互间的关系，相互间的通信往往比较复杂。此时在组件定义时加入 `relations` 定义段，可以解决这样的问题。示例：

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

运行效果：

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

// path/to/custom-ul.js
    Component({ 
      relations: { 
        './custom-li': { 
          type: 'child', // 关联的目标节点应为子节点
          linked: function(target) { 
            // 每次有custom-li被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
          },
          linkChanged: function(target) { 
            // 每次有custom-li被移动后执行，target是该节点实例对象，触发在该节点moved生命周期之后
          },
          unlinked: function(target) { 
            // 每次有custom-li被移除时执行，target是该节点实例对象，触发在该节点detached生命周期之后
          }
        }
      },
      methods: { 
        _getAllLi: function(){ 
          // 使用getRelationNodes可以获得nodes数组，包含所有已关联的custom-li，且是有序的
          var nodes = this.getRelationNodes('path/to/custom-li')
        }
      },
      ready: function(){ 
        this._getAllLi()
      }
    })
    // path/to/custom-li.js
    Component({ 
      relations: { 
        './custom-ul': { 
          type: 'parent', // 关联的目标节点应为父节点
          linked: function(target) { 
            // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后
          },
          linkChanged: function(target) { 
            // 每次被移动后执行，target是custom-ul节点实例对象，触发在moved生命周期之后
          },
          unlinked: function(target) { 
            // 每次被移除时执行，target是custom-ul节点实例对象，触发在detached生命周期之后
          }
        }
      }
    })

**注意：必须在两个组件定义中都加入relations定义，否则不会生效。**

**关联一类组件**

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

运行效果：

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

有时，需要关联的是一类组件，如：

<custom-form>
      <view>
        input
        <custom-input></custom-input>
      </view>
      <custom-submit> submit </custom-submit>
    </custom-form>

`custom-form` 组件想要关联 `custom-input` 和 `custom-submit` 两个组件。此时，如果这两个组件都有同一个behavior：

// path/to/custom-form-controls.js
    module.exports = Behavior({ 
      // ...
    })
    // path/to/custom-input.js
    var customFormControls = require('./custom-form-controls')
    Component({ 
      behaviors: [customFormControls],
      relations: { 
        './custom-form': { 
          type: 'ancestor', // 关联的目标节点应为祖先节点
        }
      }
    })
    // path/to/custom-submit.js
    var customFormControls = require('./custom-form-controls')
    Component({ 
      behaviors: [customFormControls],
      relations: { 
        './custom-form': { 
          type: 'ancestor', // 关联的目标节点应为祖先节点
        }
      }
    })

则在 `relations` 关系定义中，可使用这个behavior来代替组件路径作为关联的目标节点：

// path/to/custom-form.js
    var customFormControls = require('./custom-form-controls')
    Component({ 
      relations: { 
        'customFormControls': { 
          type: 'descendant', // 关联的目标节点应为子孙节点
          target: customFormControls
        }
      }
    })

**relations 定义段**

`relations` 定义段包含目标组件路径及其对应选项，可包含的选项见下表。

<table> 
 <thead> 
  <tr> 
   <th align="left">选项</th> 
   <th align="left">类型</th> 
   <th align="left">是否必填</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">type</td> 
   <td align="left">String</td> 
   <td align="left">是</td> 
   <td align="left">目标组件的相对关系，可选的值为 <code>parent</code> 、 <code>child</code> 、 <code>ancestor</code> 、 <code>descendant</code></td> 
  </tr> 
  <tr> 
   <td align="left">linked</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">关系生命周期函数，当关系被建立在页面节点树中时触发，触发时机在组件attached生命周期之后</td> 
  </tr> 
  <tr> 
   <td align="left">linkChanged</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">关系生命周期函数，当关系在页面节点树中发生改变时触发，触发时机在组件moved生命周期之后</td> 
  </tr> 
  <tr> 
   <td align="left">unlinked</td> 
   <td align="left">Function</td> 
   <td align="left">否</td> 
   <td align="left">关系生命周期函数，当关系脱离页面节点树时触发，触发时机在组件detached生命周期之后</td> 
  </tr> 
  <tr> 
   <td align="left">target</td> 
   <td align="left">String</td> 
   <td align="left">否</td> 
   <td align="left">如果这一项被设置，则它表示关联的目标节点所应具有的behavior，所有拥有这一behavior的组件节点都会被关联</td> 
  </tr> 
 </tbody> 
</table>

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

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[Link 1]: https://developers.weixin.qq.com/s/0kfvzKm56NZy
[img-jQsVlmA1-1624960271955_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210628082552483.png]: /images/20210901/db59a683b64f4054a9a7ed0010c3f583.png
[Link 2]: https://developers.weixin.qq.com/s/LFEVaqmh6zYU
[img-drX8RWRS-1624960271956_C_Users_java1234_AppData_Roaming_Typora_typora-user-images_image-20210628084724677.png]: /images/20210901/e483f596d7df4c988e8afd845e7d6306.png