推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：505
-
2020-05-12 浏览：502
微信小程序组件化的解决方案（下）
发布时间:2020-11-01
现在我们已经可以做到了两个组件之间的数据传递，那么如何在多个组件间传递数据呢？
如上图所示，同级的组件b 和同级的组件c , b 和 c 之间不可以直接获取，b可以获取到a， c 也可以获取到a，而a可以直接获取到 b 和 c。所以，如果想获取到兄弟元素，需要先获取到祖先节点，然后再通过祖先节点获取兄弟节点
我在组件b 里面，我需要先找到祖先组件a的实例，然后用祖先组件a的实例的getRelationNodes方法获取到组件c的实例。看见没？恐怕我们又要写一大堆重复性的代码了。
幸好，微信小程序还提供了behavior 属性, 这个属性相当于 mixin，很容易理解的，是提高代码复用性的一种方法。
思路：
假设目前有三个组件，组件a, 组件b, 组件c， 其中组件b和组件c是兄弟组件，组建a是b和c的兄弟组件。为了减少代码的重复性，我们把获取父组件的方法，和获取兄弟组件的方法封装一下，封装在 behavior 的 methods 中。只要是引入该behavior的组件，都可以便捷的调用方法。
实现：
新建一个behavior文件，命名无所谓，比如说relation_behavior.js
// 在 get_relation.js 文件里面 module.exports = Behavior({ methods:{ // 获取父组件实例的快捷方法 _parent () { // 如果根据该路径获取到acestor组件为null，则说明this为ancesor var parentNode = this.getRelationNodes('../record_item/record_item') if (parentNode&&parentNode.length !== 0) { return parentNode[0] } else { return this } }, // 获取兄弟组件实例的快捷方法 _sibling(name) { var node = this._parent().getRelationNodes(`../${name}/${name}`) if (node &&node.length > 0) { return node[0] } } } })然后在组件b, 和 组件c 上引入该behavior，并且调用方法，获取父组件和兄弟组件的实例
// 组件b中 var relation_behavior = require('./path_to_relation_behavior') Component({ behaviors:[relation_behavior], methods:{ test () { // 获得父组件的实例 let parent = this._parent() // 访问父组件的数据d console.log(parent.data.name) // 修改父组件的数据 parent.setData({ name: 'test1' }) // 获得兄弟组件的实例 let sibling = this._sibling('c') // 访问兄弟组件的数据 console.log(sibling.data.name) // 修改兄弟组件的数据 sibling.setData({ name:"test" }) } } }) // 组件c中 var relation_behavior = require('./path_to_relation_behavior') Component({ behaviors:[relation_behavior], methods:{ test () { // 获得父组件的实例 let parent = this._parent() // 访问父组件的数据d console.log(parent.data.name) // 修改父组件的数据 parent.setData({ name: 'test1' }) // 获得兄弟组件的实例 let sibling = this._sibling('b') // 访问兄弟组件的数据 console.log(sibling.data.name) // 修改兄弟组件的数据 sibling.setData({ name:"test" }) } } })同时需要注意，c和b两个组件，从relations属性的角度来说，是a的后代组件。
- 上一篇：微信小程序开发最佳实践
- 下一篇：微信小程序组件化的解决方案（上）
