Omi教程-组件通讯攻略大全
组件通讯
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的Github地址https://github.com/AlloyTeam/omi
- 如果想体验一下Omi框架,请点击Omi Playground
- 如果想使用Omi框架,请阅读 Omi使用文档
- 如果想一起开发完善Omi框架,有更好的解决方案或者思路,请阅读 从零一步步打造web组件化框架Omi
- 关于上面的两类文档,如果你想获得更佳的阅读体验,可以访问Docs Website
- 如果你懒得搭建项目脚手架,可以试试Scaffolding for Omi
- 如果你有Omi相关的问题可以New issue
- 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)
Omi教程-组件通讯攻略大全相关推荐
- Omi教程-组件通讯
组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 父容器设置 childrenData ...
- 我的世界服务器无限开号,我的世界服务器无限刷物品bug教程 | 手游网游页游攻略大全...
发布时间:2017-06-23 在我的世界服务器中怎么样刷东西呢?怎么样才能刷出大量的物品?今天游戏园小编就为大家带来了我的世界大量无限刷物品的方法,喜欢的朋友快来看看吧,希望大家能够喜欢! 这两种方 ...
- ISTQB认证考试攻略大全(2015版)
ISTQB认证考试攻略大全(2015版) 作者:郑文强 ISTQB(国际软件测试认证委员会)的整个认证体系分为三个等级:基础级.高级和专家级.截至目前全球范围内参加过ISTQB认证的软件测试工程师已达 ...
- .NET 6 攻略大全(四)
点击上方蓝字 关注我们 (本文阅读时间:15分钟) 接上篇内容,本篇文章将介绍:DependentHandle 现已公开.RyuJIT.即用型代码/Crossgen 2..NET 诊断:EventPi ...
- .NET 6 攻略大全(三)
点击上方蓝字 关注我们 (本文阅读时间:15分钟) .NET 6 继续与大家相约周日啦.本篇文章将介绍:单文件应用.IL 修整.System.Text.Json.源代码构建.库AIP的相关攻略. 单文 ...
- 方舟服务器显示等待发布,方舟开服网络显示等待发布 | 手游网游页游攻略大全...
发布时间:2016-02-28 pokemon go香港台湾即将开服,香港台湾开服时间发布.pokemon go在公布了日服开启之后,又宣布了会开启香港台湾地区,下面就和小编一起来看看什么情况吧. 香 ...
- Cloud Computing:基于无影云电脑利用Python语言实现绘制“可爱小老虎”虎年快乐及无影云电脑简介、应用场景、使用体验(五步快速上手)分享图文教程之详细攻略
Cloud Computing:基于无影云电脑利用Python语言实现绘制"可爱小老虎"虎年快乐及无影云电脑简介.应用场景.使用体验(五步快速上手)分享图文教程之详细攻略 目录 无 ...
- 手机usb连接电脑上网攻略大全【安卓,塞班,智能机,苹果】
手机usb连接电脑上网攻略大全[安卓,塞班,智能机,苹果] 手机连接电脑上网或者电脑用手机上网已经不是新鲜事了. 相对于今天的3g或者4g网络,网速已经达到或者超过了电脑固线的速度. 那么,我们在笔记 ...
- 方舟找不到mod服务器了,方舟搜索不到加mod的服务器 | 手游网游页游攻略大全
发布时间:2016-08-11 方舟:生存进化 等级上限MOD 等级研究点上限修改 方舟:生存进化 等级上限MOD 等级研究点上限修改 单机覆盖ARK\ShooterGame\Saved\Config ...
最新文章
- Spring Boot 学习系列(02)—使用热部署,提升开发效
- 【分享】在线解析微信h5网页标签跳转到手机默认浏览器的实现方式
- oracle数据库第八章答案,Oracle培训(三十)——Oracle 11g 第八章知识点小结——处理数据...
- 软件设计之UML—UML中的六大关系
- Redis 注册为 widows 服务
- word+增加水印+java_为Word2019文档添加水印的两种方法
- 中南大学12月13日考c语言,中南大学2010级C语言试卷
- Ubuntu14.04安装ROS
- gentoo/funtoo 环境配置使用 valgrind
- pytorch:属性统计
- 在Vue文件中引用模块的相对路径“@“符号表示什么意思?
- pureftp在企业中的应用及配置
- UA OPTI512R 傅立叶光学导论13 傅立叶变换及其性质
- ae效果英文版翻译对照表_AE自带特效中英文对照表
- Carla-UE4Editor导入RoadRunner地图文件(保姆级教程)
- 北邮计算机自招,自招 · 帮 | 2019自主招生名额缩减,这样报考,省三也能逆袭985...
- @Value 注解用法
- c语言ch1与ch2什么意思,ch1和ch2是什么意思
- 屏幕小于6英寸的手机_6英寸是多大?6英寸是多少厘米?
- 如何制作CHM帮助文件