微信小程序组件之间通信以及自定义组件之间的关系

首先我们自已写了一个组件假如叫(tab-bar)自定义组件给外部暴露一个方法并把组件内的数据传递过去 可以下面写法

<view>
    <view bindtap="handleClickItem" data-key="{{ key }></view>
</view>

上面是一个自定义组件的一个UI里面绑定了一个点击事件handleClickItem ,并将变量key带到点击事件方法里,

emitEvent (key) {
    this.triggerEvent('change', { key });
}

handleClickItem (e) {
    const key = e.currentTarget.dataset.key; //获取到传递过来的key
    this.emitEvent(key); //调用自定义组件内部方法
}

this.triggerEvent('change', { key });

上面这句代码的意思就是,我们给使用我们组件的外部暴露了一个change方法,并传递了一个参数key 外部怎么用呢. 下面介绍下外部怎么使用这个方法并且获取到这个参数,看下面二段代码

<tab-bar current="{{ current }}" bindchange="handleChange"></tab-bar>

handleChange({ detail }) {
  this.setData({
    current: detail.key
  });
}

第一段代码是使用了自定义组件暴露给外面的一个change (bindchange)然后自己对这个方法做了一个实现

先总结一下上面: 首先tab-bar组件绑定了一个点击事件,当点击了tab-bar时,就会实现内部的 handleClickItem 方法,然后就会调到给外面暴露的change方法中,当外面使用了change这个方法时(bindchange) 就会走到,自己绑定的handleChange方法中.最后我们设置了数据改变,当数据改变的时候,也就是tab-bar组件的current里面的数据也改变了..这个时候就会走到tab-bar组件中,而我们在tab-bar中命名了一个current字段..下面这个方法是为自定义组件定义绑定字段的.

properties: {
    current: {
        type: String,
        value: '',
        observer: 'changeCurrent'//每当这个字段改变的时候就会走这个方法
    }
}

然后每当current改变的时候,就会执行changeCurrent方法

再来看看子父组件之间是怎么传递的..

先来看看父组件,就直接在注释里面写了

Component({
    relations: {
        '../tab-bar-item/index': { // 1.关联了一个子组件的文件路径
            type: 'child',    // 2.必须这样写
            linked () {
                // 每次有关联的组件被插入时执行，触发在该节点attached生命周期之后
                this.changeCurrent(); // 我们在这里做一些操作
            },
            linkChanged () {
                // 每次有custom-li被移动后执行，触发在该节点moved生命周期之后
                this.changeCurrent();
            },
            unlinked () {
                // 每次有custom-li被移除时执行，触发在该节点detached生命周期之后
                this.changeCurrent();
            }
        }
    },

    properties: {
        current: { // 外部传递给我们的数据
            type: String,
            value: '',
            observer: 'changeCurrent' // 当这个数据改变的时候会触发这个方法
        },
        color: {
            type: String,
            value: ''
        },

        key: {
            type: String,
            value: ''
        }
    },

    data: {
        list: []
    },

    methods: {
        changeCurrent (val = this.data.current) {
            let items = this.getRelationNodes('../tab-bar-item/index'); // 这个方法可以获取到所有的子组件,而且是按顺序的
            const len = items.length;
            if (len > 0) {
                const list = [];
                items.forEach(item => { // item就是每个子组件
                    item.changeCurrent(item.data.key === val); // 调用子组件的方法
                    item.changeCurrentColor(this.data.color); // 调用子组件的方法
                    list.push({
                        key: item.data.key
                    });
                });
                this.setData({
                    list: list
                });
            }
        },
        handleClickItem (e) { // 父组件的点击事件 
            const key = e.currentTarget.dataset.key; // 11.获取传递过来的参数
            this.triggerEvent('change', { key }); // 22.将这个参数传递给外部引用父组件的组件
        }
    }
});

再来看看关联的子组件

 

// tab-bar-item
Component({
    relations: {
        '../tab-bar/index': { // 1.与组件关联,二个关联组件必须要有
            type: 'parent' // 命名为父
        }
    },

    data: {
        current: false,
        currentColor: ''
    },

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

看用法

<tab-bar current="{{ current }}" bindchange="handleChange">
  <tab-bar-item key="group"></tab-bar-item>
  <tab-bar-item key="remind"></tab-bar-item>
</tab-bar>

咱们来分析一下.假如tab-bar里面就设置了二个点击事件.宽度对半分.每当我们点击了tab-bar的时候,就会走到内部组件暴露给外部的change中的handleChange方法中.,从上面的代码分析可以看也我们,把key传递过来

  handleChange({ detail }) {
    this.setData({
      current: detail.key
    });
  }

当这个current改变的时候就会触发父类组件里面的changeCurrent方法