组件通讯

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. Javascript数组系列四之数组的转换与排序Sort方法

    今天我们继续来介绍 Javascirpt 数组中的方法,也是数组系列的第四篇文章,因为数组的方法众多,每篇文章我们都对数组的每个方法都有比较细致的描述,只要你能够从中成长一点点,那我们的目的就达到了, ...

  2. 2019年Web前端入门的自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...

  3. perfect-scrollbar在vue中的使用

    1.下载perfect-scrollbar依赖包 npm install perfect-scrollbar 2.perfect-scrollbar特性 1)直接下载依赖包及包含css样式和js 2) ...

  4. zabbix监控tomcat(使用jmx监控,但不使用系统自带模版)

    一,zabbx使用jmx监控tomcat的原理分析 1.Zabbix-Server找Zabbix-Java-Gateway获取Java数据 2.Zabbix-Java-Gateway找Java程序(j ...

  5. myeclipse10 blue版激活码

    http://blog.itpub.net/27042095/viewspace-1164998/

  6. mssql-sqlserver入门必备知识收集

    一.了解SQL 数据库的应用场景 sql 简介 二. 检索数据 SELECT语句    检索单个.多及所有列的方法分享 检索不同的值   限制结果   sqlserver注释编写方法 三.排序检索数据 ...

  7. Android 5.0 版本 USB 调试模式打开方法

    Android 4.2 版本 USB 调试模式打开方法 1. 进入“设置”页面,点击“关于平板电脑”.见下图红色方框.   2. 疯狂点击“版本号”,见下图红色方框,直到出现“您现在处于开发者模式!” ...

  8. Android音频系统

    1 分析思路 Thread如何创建? AudioPolicyService是策略的制定者,AudioFlinger是策略的执行者, 所以: AudioPolicyService根据配置文件使唤Audi ...

  9. iOS 键盘上方增加工具栏

    UIToolbar *keyboardDoneButtonView = [[UIToolbar alloc] init]; [keyboardDoneButtonView sizeToFit]; UI ...

  10. C++多线程同步技巧(二)--- 事件

    简介 Windows在线程控制方面提供了多种信号处理机制,其中一种便是使用 CreateEvent() 函数创建事件,然后使用信号控制线程运行.其中将事件变为有信号可使用 SetEvent() 函数, ...