Omi教程-组件通讯
组件通讯
Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯:
- 通过在组件上声明 data-* 传递给子节点
- 通过在组件上声明 data 传递给子节点
- 父容器设置 childrenData 自动传递给子节点
- 完全面向对象,可以非常容易地拿到对象的实例,之后可以设置实例属性和调用实例的方法
所以通讯变得畅通无阻,下面一一来举例说明。
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-*的局限性。
childrenData通讯
...
class App extends Omi.Component {
constructor(data) {
super(data);
this.childrenData = [{ name : 'Omi' }];
}
render() {
return `
<div>
<Hello />
</div>
`;
}
}
Omi.render(new App(),"#container");
通用this.childrenData传递data给子组件,childrenData是一个数组类型,所以支持同时给多个组件传递data,与render里面的组件会一一对应上。
通过对象实例
...
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,npm安装omis便可
- 如果你有Omi相关的问题可以New issue
- 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)
Omi教程-组件通讯的更多相关文章
- Omi教程-组件通讯攻略大全
组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设 ...
- Omi教程-组件
组件 Omi框架完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件... 简单组件 ...
- Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明
组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...
- Omi教程-通讯通讯攻略大全
组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设 ...
- Omi框架学习之旅 - 组件通讯(data-*通讯) 及原理说明
上一篇文章说了omi中的组件,以及组件如何使用及嵌套. 那omi中的组件是怎么通讯的呢? 其实omi提供的通讯方式比较丰富,各有千秋,各有各的场景用途.所以按需使用即可. 老规矩:先上demo代码, ...
- Angular4 组件通讯方法大全
组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue组件通讯方法汇总(在不使用vuex的情况下)
前三种是父子组件通讯,最后一种是平级组件.
- Angular6 学习笔记——组件详解之组件通讯
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
随机推荐
- iOS开发 改变UINavigationController的UINavigationBar的高度和背景图片
1.改变高度 自定义UINavigationBar的新类别: //UINavigationBar+BackgoundImage.h #import <Foundation/Foundation. ...
- ID3决策树预测的java实现
刚才写了ID3决策树的建立,这个是通过决策树来进行预测.这里主要用到的就是XML的遍历解析,比较简单. 关于xml的解析,参考了: http://blog.csdn.net/soszou/articl ...
- 数据分析与R语言-概念点(一)
一.数据分析 1.数据分析的多层模型 常用的统计量 常用的算法 常用的数据分析工具 常见的报表 二.R语言 1.什么是R语言? R是用于统计分析.绘图的语言和操作环境.R是属于GNU系统的一个 ...
- DrawerLayout学习笔记
基本步骤: 1>在XML中将DrawerLayout作为根视图 2>根视图中放两个View,第一个是主视图,即DrawerLayout隐藏的时候的视图,第二是就DrawerLayout的视 ...
- leetcode day4
[171]Excel Sheet Column Number Given a column title as appear in an Excel sheet, return its correspo ...
- 安卓 handler解析
参考: 1.http://www.2cto.com/kf/201302/190591.html(安卓更新UI的两种方式,handler,Activity.runOnUIThread()) 2.http ...
- Oracle 事件
Oracle 的事物 事物是设么 事物是用于高正数据的一致性,他由一组相关的dml语句组成(增加删除语句),这组语句要么全部成功要不全部失败. 如:网上转账. 1)设置保存点 Savepoint a1 ...
- TCP carries HTTP data in order, and without corruption
wTCP/IP承载几乎所有的HTTP通信. HTTP The Definitive Guide
- instanceof typeof
//清单 6. JavaScript instanceof 运算符代码 function instance_of(L, R) {//L 表示左表达式,R 表示右表达式 var O = R.protot ...
- //@sourceURL=filename.js
在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样 ...