SOURCE

 
// 图层容器
Yox.component("layer-wrapper", {
    model: "config",
    template: `
        <li class="layer-wrapper" on-click="layerWrapperClick">
            <$component {{...this}} model="config" />
        </li>
    `,
    events: {
        layerWrapperClick(event, data){
            event.stop();
            this.fire("active", {
                index: this.get("index")
            })
        }
    }
});

// 图层元件
Yox.component("layer-text", {
    model: "config",
    template: `
        <div>
            <a 
                href='javascript:;'
            >layer-text: {{config.pk.value}} index: {{index}}</a>
        </div>
    `
});

////////////////////

// 属性单元容器
Yox.component("config-input", {
    model: "value",
    template: `
        <div>
            {{component}} {{value}}
            <br>
            <$component model="value" {{...this}} />
        </div>
    `,
    watchers: {
        value: function(val, old, kp){
            console.log(val, old, kp)
        }
    }
});
// // 属性输入元件
Yox.component("el-input", {
    model: "value",
    template: `
        <div>
            <input model="value" />
        </div>
    `,
    watchers: {
        value: function(val, old, kp){
            console.log(val, old, kp)
        }
    }
});
 


/////


let app = new Yox({
    el: "#app",
    template: `
        <div>

            <div>
                <div>layers</div>

                <div>
                    <ul>
                        {{#each layers:index}}
                            <layer-wrapper {{...this}} 
                                index="{{index}}"
                            />
                        {{/each}}    
                    </ul>
                </div>

            </div>

            <hr>

            <div>
                <div>
                layer config currentIndex:{{currentIndex}}
                </div>
                <div>
                
                    {{#each layers[currentIndex].config:key}}
                        {{value}}
						<config-input {{...this}} model="value"/>
					{{/each}}
                
                </div>

            </div>


            
        </div>
    `,

    data(){

        return {

            currentIndex: 0,

            layers: [
                
                {
                    component: "layer-text",
                    config: {
                        pk: {
                            component: "el-input",
                            value: 111
                        }
                    }
                },
                {
                    component: "layer-text",
                    config: {
                        pk: {
                            component: "el-input",
                            value: 222
                        }
                    }
                },
                {
                    component: "layer-text",
                    config: {
                        pk: {
                            component: "el-input",
                            value: 333
                        }
                    }
                }
            ]

        }
    },

    events: {

        active(event, data){
            this.set("currentIndex", data.index)
        },

        
        
    }

});

<div id="app"></div>

<script src="//unpkg.com/yox@1.0.0-alpha.119/dist/standard/dev/yox.js"></script>
<script src="//unpkg.com/bell-ui@0.11.8/dist/bell-ui.js"></script>

.layer-wrapper {
    border: 1px solid black;
    margin: 10px;
}