LOADING...
微信小程序组件关系·getRelationNodes和tabs组件开发
公众文章 小程序开发 Typescript基础
作者:TANGJIE 查看:25 发布时间:2020-08-06
简介: 小程序这一块,很多同学都是浅尝辄止,没有深入的去了解,关于getRelationNodes,或者是做一个类tabs组件不知道如何入手。本篇就是带你们认识getRelationNodes和如何开发一个tabs组件

微信小程序组件关系 - getRelationNodes和tabs组件开发

1.组件之间建立了父子关系

<wet-tabs current="{{ current }}" bindchange="handleChange"> <wet-tabs-item key="tab1" title="选项1"></wet-tabs-item> <wet-tabs-item key="tab2" title="选项2"></wet-tabs-item> </wet-tabs>

比如我们要实现这样一个组件,很明显组件wet-tabs和wet-tabs-item组成了明确的父子关系。这个例子中, 都是自定义组件,它们有相互间的关系,相互间的通信往往比较复杂。此时在组件定义时加入 relations 定义段,可以解决这样的问题。

父级wet-tabs里面的代码如下:这样就建立了与子wet-tabs-item之间的联系

Component({ relations: { '../item/index': { type: 'child', // 关联的目标节点应为子节点 linked: function(target) { // 每次有wet-tabs-item被插入时执行,target是该节点实例对象,触发在该节点attached生命周期之后 }, linkChanged: function(target) { // 每次有wet-tabs-item被移动后执行,target是该节点实例对象,触发在该节点moved生命周期之后 }, unlinked: function(target) { // 每次有wet-tabs-item被移除时执行,target是该节点实例对象,触发在该节点detached生命周期之后 } } }, })

一般来说linked,linkChanged,unlinked,这里面需要执行的函数一般是获取到子节点,获取子节点就是通过this.getRelationNodes(’…/item/index’);这个方式,这样就能够拿到wet-tabs-item,(不过值得注意的是这个拿到的是一个子节点数组),如果子节点的方法入参需要从父节点获取,这时候就需要遍历字节点,然后将参数传入,列子如下:

methods: { //组件初始化事件,用来做其下子组件插入移除时候的视图初始化和将相关联的组件事件需要到父组件拿参数进行初始化 changeCurrent (val?:string) { val = val?val:this.data.current; let items = this.getRelationNodes('../item/index');//获取到子组件节点 console.log(items) const len = items.length; if (len > 0) { items.forEach(item => { item.changeCurrent(item.data.key === val); item.changeCurrentColor(this.data.color); }); } }, }

其子组件的事件代码为:

methods: { changeCurrent (current) { this.setData({ current }); }, changeCurrentColor (currentColor) { this.setData({ currentColor }); } }

这样相关联的子组件事件方法就可以完美的从父组件拿到相关数据。

2. 将相关联子组件方法绑定到父组件

还是上面tabs的列子,一般来说,我们点击改变tab绑定的事件是绑定在父组件上的,代码如下:

<wet-tabs current="{{ current }}" bindchange="handleChange"> <wet-tabs-item key="tab1" title="选项1"></wet-tabs-item> <wet-tabs-item key="tab2" title="选项2"></wet-tabs-item> </wet-tabs>

但是我们点击的时候其实是点击的wet-tabs-item,拿到item上的key值,给父组件,分发到外层来改变current。相当于是一个事件的冒泡一样,只是在常规的js代码思维模式下我们用的是e.target,去操作dom,但是小程序是不能直接操作dom的为此就需要我们用一用特别的方式去传组件内部的key值来告诉父组件我点击的是哪个tas-item;

于是我们将在子组件中用getRelationNodes来获取相关联的父组件,然后将时间分发到父组件,子组件代码如下:

methods: { ...... handleClickItem () { const parent = this.getRelationNodes('../tabs/index')[0]; parent.emitEvent(this.data.key); } }

父组件代码如下:

methods: { emitEvent (key) {//父级分发事件 this.triggerEvent('change', { key }); } }

至此简易的tabs组件大部分工作就完成了。

3. 注意事项

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

文章评论

历史评论

暂无评论,赶紧来抢沙发吧!