微信小程序组件间关系怎么定义和使用

这篇文章主要介绍“微信小程序组件间关系怎么定义和使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序组件间关系怎么定义和使用”文章能帮助大家解决问题。
　　组件间关系
　　定义和使用组件间关系
　　有时需要实现这样的组件：
　　item 1
　　item 2
　　这个例子中， custom-ul 和 custom-li 都是自定义组件，它们有相互间的关系，相互间的通信往往比较复杂。此时在组件定义时加入 relations 定义段，可以解决这样的问题。示例：
　　// path/to/custom-u免费云主机域名l.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
　　}
　　}
　　})关于“微信小程序组件间关系怎么定义和使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: javascript里throw指的是什么

本文小编为大家详细介绍“javascript里throw指的是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“javascript里throw指的是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 在JavaScript中，t…