小程序 给slot插槽多个元素传值

示例代码：

在一个 组件/页面 中的HTML代码中
<steps>中嵌套着多个<step>

<steps>
    <step></step>
    <step></step>
</steps>

首先我们需要了解小程序的一些API

组件间关系

父组件的配置

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

子组件的配置

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生命周期之后
    }
  }
}
})

如果只是父组件传值给子组件，那么以上配置项父组件都需要配置，儿组件只需要配置type即可

创建节点选择器

wx.createSelectorQuer()返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。
创建之后，我们就可以使用选择器来选择节点，从而进行相关操作
使用方法：

const query = wx.createSelectorQuery()
const node = query.select('#the-id')

按照选择器的写法即可

获取关系节点

在组件内部，可以通过 this.getRelationNodes( 'path' ) 方法获取到由对应的组件实例组成的数组

当关联组件不止一个的时候，这个数组会包含所有的组件实例，并按照文档流的顺序排列

注意：必须在两个组件中都定义 relations，否则不会生效

代码展示

注意点：

1. 一定要在父组件中开启多组件支持
   options: {multipleSlots: true }

当子节点插入到父节点的时候,调用linked()

在linked()中，获取该组件的 关系组件 ，对子组件的实例进行数据初始化（即调用子组件的方法）

// components/steps/index.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  relations:{
    '../step/index':{
      type:'child',
      linked() {
        this._initSteps()
      },
      unlinked(){
        this._initSteps()
      }
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    _initSteps(){
      const query = wx.createSelectorQuery().in(this)
      query.select('.container').boundingClientRect().exec(res => {
        let steps = this.getRelationNodes('../step/index')
        this.data.length = steps.length
        if(this.data.length > 0) {
          steps.forEach((step, index) => {
            step.updateDataChange({
              index,
              ...this.data,
              stepsWidth: res[0].width
            });
          })
        }
      })
    }
  }
})

// components/step/index.js
Component({
  relations:{
    '../steps/index':{
      type:'parent'
    }
  },

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
     // 与父组件通信并绑定相关配置数据
     updateDataChange(options) {
      this.setData({
        ...options
      });
      console.log(this.data)
    }
    
  }
})