Omi教程-组件通讯
来源:互联网 发布:淘宝销量累计 编辑:程序博客网 时间:2024/05/06 18:06
组件通讯
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)
0 0
- Omi教程-组件通讯
- Omi教程-组件通讯
- Omi教程-组件通讯
- Omi教程-组件通讯
- Omi教程-组件通讯
- Omi教程-组件通讯
- Omi教程-组件
- Omi教程-组件
- Omi教程-组件
- 2017年试试Web组件化框架Omi
- 2017年试试Web组件化框架Omi
- 2017年试试Web组件化框架Omi
- 2017年试试Web组件化框架Omi
- Omi原理-Hello Omi
- Omi原理-Hello Omi
- Omi原理-Hello Omi
- Android组件间通讯
- 统一通讯组件接口
- oracle查询大文本类型转化为string
- Spring入门——Bean装配之Autowired注解
- 怎么在extjs中表格中加超链接并且传值
- Spark 逻辑回归
- 可并堆之左偏树
- Omi教程-组件通讯
- (Ryan的Koa系列博客)1.说说Koa用到的JS基础知识
- DataGuard之DG环境搭建
- Servlet/JSP(二)
- memset函数详细说明
- 主成分分析法用于数据可视化实验
- 总结2017-2-16
- Unity优化-camera剔除
- Centos 安装 NodeJS