HTML5技术

Omi教程-组件通讯攻略大全 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2017-02-17 14:00 我要评论( )

组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 所以通讯变得畅通无阻,下面一一来举例说明。 data-*通讯 (data) () (target() .App (data) () .) ; 一般data-用来传递值类型,如string、number。值得注意的是,通过data-接收到的

组件通讯

Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯:

所以通讯变得畅通无阻,下面一一来举例说明。

data-*通讯

(data) () (target() .App (data) () .);

一般data-用来传递值类型,如string、number。值得注意的是,通过data-接收到的数据类型都是string,需要自行转成number类型。
通常情况下,data-能满足我们的要求,但是遇到复杂的数据类型是没有办法通过大量data-去表达,所以可以通过data通讯,请往下看。

data通讯

如上面代码所示,通过 data-name="Omi"可以把name传递给子组件。下面的代码也可以达到同样的效果。

... (data) .() .);

使用data声明,会去组件的instance(也就是this)下找对应的属性,this下可以挂载任意复杂的对象。所以这也就突破了data-*的局限性。

如果instance下面的某个属性下面的某个属性下面的某个数组的第一个元素的某个属性要作为data传递Hello怎么办?
没关系,data声明是支持复杂类型的,使用方式如下:

... (data) .[ [] ] () ...

点击这里→data映射复杂数据

childrenData通讯

... (data) .]() .);

通用this.childrenData传递data给子组件,childrenData是一个数组类型,所以支持同时给多个组件传递data,与render里面的组件会一一对应上。

group-data通讯

childrenData的方式可以批量传递数据给组件,但是有很多场景下data的来源不一定非要都从childrenData来,childrenData是个数组,会和组件的顺序一一对应,这就给不同传递方式的data必须全部集中的childrenData中,非常不方便。group-data专门为解决上面的痛点而生,专门是为了给一组组件批量传递data。

.App (data) .]() .);

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

运行结果如下:

点击这里→group-data

同样group-data支持复杂数据类型的映射,需要注意的是,group-data映射的终点必须是一个数组:

.App (data) .[ [] ] () .);

点击这里→group-data映射复杂数据

通过对象实例

... (data) ().update() .);

通过omi-id

... (data) ().update() .);

通过在组件上声明omi-id,在程序任何地方拿到该对象的实例。这个可以算是跨任意组件通讯神器。

特别强调

关于上面的第三条也就是这样的逻辑伪代码:

....data-); }

招募计划




 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Omi教程-使用group-data通讯 - 【当耐特】

    Omi教程-使用group-data通讯 - 【当耐特】

    2017-02-17 09:00

  • Omi教程-组件通讯 - 【当耐特】

    Omi教程-组件通讯 - 【当耐特】

    2017-02-14 15:01

  • 性能秒杀log4net的NLogger日志组件(附测试代码与NLogger源码) - Sam Xiao

    性能秒杀log4net的NLogger日志组件(附测试代码与NLogger源码) - Sam

    2017-02-13 17:00

  • Omi教程-组件 - 【当耐特】

    Omi教程-组件 - 【当耐特】

    2017-02-13 13:11

网友点评
l