B2C电商
B2B交易系统
智慧门店
分销商城
社区电商
查看更多

怎么开小程序商城店铺
  • 店铺开通

    销客多小程序商城,可快速开通上架店铺

  • 拉新推广

    链接12亿微信流量,拉新工具沉淀意向客户

  • 复购裂变

    拼团、分销等提升转化,不断裂变新用户购买

  • 对接门店

    线上导流、促活门店,实现线上下同步发展

制作小程序
HiShop > Hi小程序 > 小程序开发 >

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

2020-09-27 作者:黄先生

  组件间关系

  定义和使用组件间关系

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

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

  

   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

  }

  }

  })

推荐文章

注册小程序
注册小程序