update website

This commit is contained in:
kmdjs 2017-02-16 17:09:39 +08:00
parent bc17fccebc
commit 347093d24c
2 changed files with 84 additions and 1 deletions

View File

@ -109,6 +109,44 @@ Omi.render(new App(),"#container");
通用this.childrenData传递data给子组件childrenData是一个数组类型所以支持同时给多个组件传递data与render里面的组件会一一对应上。
### group-data通讯
childrenData的方式可以批量传递数据给组件但是有很多场景下data的来源不一定非要都从childrenData来childrenData是个数组会和组件的顺序一一对应这就给不同传递方式的data必须全部集中的childrenData中非常不方便。group-data专门为解决上面的痛点而生专门是为了给一组组件批量传递data。
```js
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下面找对应的属性然后根据当前的位置和对应数组的位置会一一对应起来。
运行结果如下:
![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170216110701535-1698390390.png)
[在线试试->group-data](http://alloyteam.github.io/omi/website/redirect.html?type=group_data)
### 通过对象实例
```js

File diff suppressed because one or more lines are too long