小程序开发有时遇上组件使用组件的情况，比如下图的热门榜和下面对应的swiper，

主页面wxml代码：

<segmentpane segmentitems="{{items}}"></segmentpane>

总结一下主要有3点需要注意的地方：

1.需要把新的组件的地址注册到主页面的环境（*.json）下（这里pane是父组件）

2.在父组件内部环境（segmentpane.json）注册新组件的地址

3.剩下就是数据的传输，把数据放进数组里最后循环展示出来，开始数据放在主页面传输顺序：数据——>父组件内部——>子组件内部
这是因为主页面使用的是父组件，而不是子组件在父组件内部，才使用子组件

<--父组件segmentpane.wxml-->
<view class="segmentpane">
    <segmentbar id="sp-sb" segmentitems="{{segmentitems}}" bind:selectChange="handSeletchange" current="{{currentidx1}}">
    </segmentbar>
    <swiper circular class="sw" current="{{currentidx}}" bindchange="handSeletchange1">
        <swiper-item>
            <view>page1</view>
        </swiper-item>

 在数据传递的时候有几点点需要注意：

 1.在父组件里定义properties属性（segmentpane.js）

这样被注册的父组件一定可以接受到数据，然后父组件把数据传给子组件
（写类型的时候Array首字母大写，否则无法识别）

2.接着在主页面里用花括号语法定义属性写下名字，

括号里面放页面的值items（传递的是主页面.js文件里的页面初始数据data）

接下来用个for循环就可以了

<!-- block位置放在要遍历的数据()的上面 -->
    <block wx:for="{{segmentitems}}" wx:key="index">
        <view id="{{index}}" class="segmentitem {{currentid == index?'active':''}}" bindtap="_handtap_1">
            <!-- 直接新建一个属性（三目运算）实现js动态效果 -->
            <!-- 方法放到组件的环境下面 -->
            <text class="maintitle">{{item.title}}</text>
            <text class="subtitle">{{item.subtitle}}</text>
        </view>
    </block>  

 最后就是父子组件背后的逻辑方法还有cs3的样式了：

父组件
methods: {
        handSeletchange:function(evt){
            console.log(evt)
            let idx=parseInt(evt.detail.currentidx)
            this.setData({
                currentidx:idx
            })
        },
        handSeletchange1:function(evt){
            console.log(evt.detail.current)
            // 1.选择组件对象本身
            let segbar=this.selectComponent("#sp-sb")
            // 2.调用对象所提供的方法
            segbar._setcurrentidx(evt.detail.current)
        }

methods: {
        _setcurrentidx:function(index){
            this.setData({
                currentid:index
            })
        },

        _handtap_1:function(evt){
            this.setData({
                currentid:evt.currentTarget.id
                
            })
            // 触发一个自定义事件（trigger），并且传输数据
            this.triggerEvent("selectChange",{currentidx:evt.currentTarget.id})
            console.log(evt.currentTarget.id)
        }

        

    }