组件通讯

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

  • 通过在组件上声明 data-* 传递给子节点
  • 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射)
  • 父容器设置 childrenData 自动传递给子节点
  • 声明 group-data 传递(支持复杂数据类型的映射)
  • 完全面向对象,可以非常容易地拿到对象的实例,之后可以设置实例属性和调用实例的方法

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

data-*通讯

class Hello extends Omi.Component {
constructor(data) {
super(data);
}
style () {
return `
h1{
cursor:pointer;
}
`;
}
handleClick(target, evt){
alert(target.innerHTML);
}
render() {
return `
<div>
<h1 onclick="handleClick(this, event)">Hello ,{{name}}!</h1>
</div>
`; }
} Omi.makeHTML('Hello', Hello); class App extends Omi.Component {
constructor(data) {
super(data);
} render() {
return `
<div>
<Hello data-name="Omi" />
</div>
`;
}
} Omi.render(new App(),"#container");

一般data-用来传递值类型,如string、number。值得注意的是,通过data-接收到的数据类型都是string,需要自行转成number类型。

通常情况下,data-能满足我们的要求,但是遇到复杂的数据类型是没有办法通过大量data-去表达,所以可以通过data通讯,请往下看。

data通讯

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

...
class App extends Omi.Component {
constructor(data) {
super(data);
this.helloData = { name : 'Omi' };
} render() {
return `
<div>
<Hello data="helloData" />
</div>
`;
}
} Omi.render(new App(),"#container");

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

如果instance下面的某个属性下面的某个属性下面的某个数组的第一个元素的某个属性要作为data传递Hello怎么办?

没关系,data声明是支持复杂类型的,使用方式如下:

...
class App extends Omi.Component {
constructor(data) {
super(data);
this.complexData ={
a:{
b:{
c:[
{
e:[{
name:'ComplexData Support1'
},{
name:'ComplexData Support2'
}]
},
{
name: 'ComplexData Support3'
}
]
}
}
};
} render() {
return `
<div>
<Hello data="complexData.a.b.c[1]" />
</div>
`;
}
}
...

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

childrenData通讯

...
class App extends Omi.Component {
constructor(data) {
super(data);
this.childrenData = [{ name : 'Omi' } , { name : 'dntzhang' }];
} render() {
return `
<div>
<Hello />
<Hello />
</div>
`;
}
} Omi.render(new App(),"#container");

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

group-data通讯

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

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

import Hello from './hello.js';

Omi.makeHTML('Hello', Hello);

class App extends Omi.Component {
constructor(data) {
super(data);
this.complexData ={
a:{
b:{
c:[
{
e:[{
name:'ComplexData Support1'
},{
name:'ComplexData Support2'
}]
},
{
name: 'ComplexData Support3'
}
]
}
}
};
} render() {
return `
<div>
<Hello group-data="complexData.a.b.c[0].e" />
<Hello group-data="complexData.a.b.c[0].e" />
</div>
`; }
} Omi.render(new App(),"#container");

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

通过对象实例

...
class App extends Omi.Component {
constructor(data) {
super(data);
} installed(){
this.hello.data.name = "Omi";
this.update()
} render() {
return `
<div>
<Hello name="hello" />
</div>
`;
}
} Omi.render(new App(),"#container");

通过omi-id

...
class App extends Omi.Component {
constructor(data) {
super(data);
} installed(){
Omi.get("hello").data.name = "Omi";
this.update()
} render() {
return `
<div>
<Hello omi-id="hello" />
</div>
`; }
} Omi.render(new App(),"#container");

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

特别强调

  • 通过childrenData或者data方式通讯都是一锤子买卖。后续变更只能通过组件实例下的data属性去更新组件
  • 通过data-✼通讯也是一锤子买卖。后续变更只能通过组件实例下的data属性去更新组件。
  • 关于data-✼通讯也可以不是一锤子买卖,但是要设置组件实例的dataFirst为false,这样的话data-✼就会覆盖组件实例的data对应的属性

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

if(this.dataFirst){
this.data = Object.assign({},data-✼ ,this.data);
}else{
this.data = Object.assign({},this.data, data-✼);
}

招募计划

Omi教程-组件通讯攻略大全的更多相关文章

  1. Omi教程-通讯通讯攻略大全

    组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设 ...

  2. Omi教程-组件通讯

    组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 父容器设置 childrenData ...

  3. Omi教程-组件

    组件 Omi框架完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件... 简单组件 ...

  4. Flask 通关攻略大全

    基本使用 from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello ...

  5. Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

    组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...

  6. 来开源吧!发布开源组件到 MavenCentral 仓库超详细攻略

    请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...

  7. Windows英文版GitHub客户端使用操作流程图文攻略教程现没中文版

    Git是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作Linux内核代码的管理.作为一个程序员,我们需要掌握其用法. 作为开源代码库以及版本控制系统,Github目前拥有140 ...

  8. EhLib DBGridEh组件在Delphi中应用全攻略总结(转)

    EhLib DBGridEh组件在Delphi中应用全攻略总结(转) http://blog.sina.com.cn/s/blog_94b1b40001013xn0.html 优化SQL查询:如何写出 ...

  9. 最新亚马逊 Coupons 功能设置教程完整攻略!

    最新亚马逊 Coupons 功能设置教程完整攻略! http://m.cifnews.com/app/postsinfo/18479 亚马逊总是有新的创意,新的功能.最近讨论很火的,就是这个 Coup ...

随机推荐

  1. 一些安全相关的HTTP header

    1.Strict-Transport-Security HTTP Strict-Transport-Security,简称为HSTS. 作用:允许一个HTTPS网站,要求浏览器总是通过HTTPS访问它 ...

  2. mssql sqlserver 验证整型函数分享

    转自:http://www.maomao365.com/?p=6227 摘要: 下文将制作一个isnumber验证整型的函数,供在sql脚本中做数值判断,如下所示: 例: 实现原理:判断 是否包含特殊 ...

  3. [C#]List的Sort()、Find()、FindAll()、Exist()的使用方法举例

    [C#基础]List的Sort().Find().FindAll().Exist()的使用方法举例 List函数用得还是比较多的,正好用到其中的向个方法,做了一个例程,再总结一下: 先建一个学生类: ...

  4. visual studio 的git插件推荐

    TGit 支持vs 2013/15/17及更高版本,需要搭配 TortoiseGit 和 MSysGit 一起使用,当然这两者也是我在windows下使用git的推荐组合. 历史版本的diff查看使用 ...

  5. Linux Rsyslog日志集中管理

    Linux Rsyslog日志集中管理 一.Rsyslog简介 ryslog 是一个快速处理收集系统日志的程序,提供了高性能.安全功能和模块化设计.rsyslog 是syslog 的升级版,它将多种来 ...

  6. jar包导入导出

    java项目: 在classLoader加载jar和class的时候,是分开加载的,一般jar导入分两种: 1.在web-inf下的lib中直接引入 2.在user library上引入 无论以上哪种 ...

  7. C语言 排序算法总结

    #include<stdio.h> #include<stdlib.h> //作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ # ...

  8. 我的第一个SolidWorks图

    1. 学习到的知识点 2. 完成的工程图 3. 感受 学习是一种快乐,学到新的知识要学会分享,只要坚持,就有那么一点点的成就. 4. 参考 SolidWorks帮助文档

  9. js开发打印证书功能(二)

    在上一篇的基础上,实现了一下另外一种方式. 上一篇地址:https://www.cnblogs.com/ljwsyt/p/9525290.html 首先,该方式也是有几种方法. 1.在上一篇的基础上, ...

  10. CF 331 E. Biologist

    CF 331 E. Biologist 题目描述 题目大意:有\(n\)个点,初始时每个点为黑色或者白色,你可以花费\(v_i\)的代价将一个点反色.然后你有许多计划,每个计划要求一个点集中的所有点为 ...