最新微信小程序组件间关系,小程序关联一类组件

发布时间:2023-08-29 03:45:52 作者:kukutiti 阅读量:8695

  组件间关系

  定义和使用组件间关系

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

  

   item 1

   item 2

  

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

  // 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定义,否则不会生效。

  关联一类组件

  有时,需要关联的是一类组件,如:

  

  

  input

  

  

   submit

  

  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

  }

  }

  })

***本网站图片,文字之类版权申明,因为网站可以由注册用户自行上传图片或文字,本网站无法鉴别所上传图片或文字的知识版权,如果侵犯,请及时通知我们,本网站将在第一时间及时删除。

我要评论

网友评论


评论时间:2023-12-17 10:00:02

25.添加好友论坛app制作平台 游戏app制作教程 友

回复
秒制作
Catfish(鲶鱼) Blog V 4.7.3