Omi教程-使用group-data通讯

写在前面

Omi框架组建间的通讯非常遍历灵活，上篇文章介绍了几种通讯方式，其中childrenData的方式可以批量传递数据给组件，但是有很多场景下data的来源不一定非要都从childrenData来，childrenData是个数组，会和组件的顺序一一对应，这就给不同传递方式的data必须全部集中的childrenData中，非常不方便。

这篇介绍下group-data通讯，专门为解决上面的痛点而生，看名字就知道group-data专门是为了给一组组件批量传递data。

group-data通讯

import Hello from './hello.js';

Omi.makeHTML('Hello', Hello);

class App extends Omi.Component {
    constructor(data) {
        super(data);
        this.testData = [{name: 'Omi'}, {name: 'dntzhang'}, {name: 'AlloyTeam'}];
    }

    render() {
        return  `
        <div>
            <Hello group-data="testData" />
            <Hello group-data="testData" />
            <Hello group-data="testData" />
        </div>
        `;

    }
}

Omi.render(new App(),"#container");

只需要在声明的子组件上标记group-data，就会去当前组件的instance（也就是this）下面找对应的属性，然后根据当前的位置，和对应数组的位置会一一对应起来。

运行结果如下：

在线试试->group-data

招募计划

Omi的Github地址https://github.com/AlloyTeam/omi
如果想体验一下Omi框架，请点击Omi Playground
如果想使用Omi框架，请阅读 Omi使用文档
如果想一起开发完善Omi框架，有更好的解决方案或者思路，请阅读从零一步步打造web组件化框架Omi
关于上面的两类文档，如果你想获得更佳的阅读体验，可以访问Docs Website
如果你懒得搭建项目脚手架，可以试试Scaffolding for Omi，npm安装omis便可
如果你有Omi相关的问题可以New issue
如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)

巴特西

Omi教程-使用group-data通讯

写在前面

group-data通讯

招募计划

最新文章

热门文章