组件通讯

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教程-组件通讯的更多相关文章

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

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

  2. Omi教程-组件

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

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

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

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

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

  5. Omi框架学习之旅 - 组件通讯(data-*通讯) 及原理说明

    上一篇文章说了omi中的组件,以及组件如何使用及嵌套. 那omi中的组件是怎么通讯的呢? 其实omi提供的通讯方式比较丰富,各有千秋,各有各的场景用途.所以按需使用即可. 老规矩:先上demo代码, ...

  6. Angular4 组件通讯方法大全

    组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...

  7. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  8. vue组件通讯方法汇总(在不使用vuex的情况下)

    前三种是父子组件通讯,最后一种是平级组件.

  9. Angular6 学习笔记——组件详解之组件通讯

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

随机推荐

  1. iOS纯代码工程手动快速适配

    首先说下让自己的程序支持iPhone6和6+,第一种使用官方提供的launch screen.xib,这个直接看官方文档即可,这里不再多述:第二种方法是和之前iPhone5的类似,比较简单,为iPho ...

  2. 苹果App Store开发者帐户从申请,验证,到发布应用(3)

    应用上架的流程和操作步骤 下面主要介绍一下,上架应用相关流程和相关的操作步骤:   1.登录itunes,https://itunesconnect.apple.com/WebObjects/iTun ...

  3. 企业证书APP发布流程 分类: ios相关 app相关 2015-06-10 11:01 212人阅读 评论(0) 收藏

    企业发布app的 过程比app store 发布的简单多了,没那么多的要求,哈 但是整个工程的要求还是一样,比如各种像素的icon啊 命名规范啊等等. 下面是具体的流程 1.修改你的 bundle i ...

  4. R Student Companion(R语言初学指南)的源代码_数据_插图

    下载内容见附件:http://files.cnblogs.com/files/ml-cv/data_And_R_script.zip.

  5. iOS开发网络篇之文件下载、大文件下载、断点下载

    from: http://www.jianshu.com/p/f65e32012f07

  6. Beautiful Soup 定位指南

    Reference: http://blog.csdn.net/abclixu123/article/details/38502993 网页中有用的信息通常存在于网页中的文本或各种不同标签的属性值,为 ...

  7. java系列--抽象类和接口

    问题:什么是接口,作用是什么 问题:什么是抽象类,作用是什么 一.抽象类 1.当父类的一些方法不确定时, 2.当一个子类继承的父类是抽象类的话,需要我们把抽象类中所有的抽象方法全部实现 3.抽象方法本 ...

  8. Leetcode 197. Rising Temperature

    Given a Weather table, write a SQL query to find all dates' Ids with higher temperature compared to ...

  9. VS2013 F12无法转到函数的定义处,总是从“元数据”获取的问题 ——解决方法

    右键项目名称-->点击菜单中的"添加"-->点击"引用"-->在弹出窗中点击"解决方案"下的"项目", ...

  10. HTML5+MUI+HBuilder 之初探情人

    07,08年那会儿正当Java火爆,C/C++仍是广泛运用的一门语言的时候,所以 我的大学都献给了C/C++和Java.当诺基亚的倒闭成为按键机时代衰落的标志时,移动APP的开发也如破堤之洪,爆炸式的 ...