组件通讯

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. mustache.js基本使用(一)

    作者:zccst 模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练使用,但实际上仍不知道原因. 再次学习模板已不是从0开始,所以还算顺手,但毕竟还只限于使用,今天继续 ...

  2. iOS开发之指纹解锁

    http://blog.csdn.net/hongfengkt/article/details/49868073 前一阵子一直在赶项目进度,没有太多时间写博客,现在终于空闲了,将以前欠下的博客补上来. ...

  3. 【转】iOS开发路线简述

    简单看了下楼主说的很详细,尤其是最后面那个图描述很直观,让想学习ISO开发的程序猿很清晰每个步骤学习的内容,在此收藏下. iOS系统以及iPhone的出来都要感谢乔布斯,一个完美主义者,从如此优秀的i ...

  4. 【转】Linux正则表达式使用指南

    正则表达式是一种符号表示法,用于识别文本模式.Linux处理正则表达式的主要程序是grep.grep搜索与正则表达式匹配的行,并将结果输送至标准输出. 1. grep匹配模式 grep按下述方式接受选 ...

  5. eclipse 完全智能提示

     1.添加智能提示 eclipse的代码提示是按”.”这个字符提示的,而如果想在其他的条件下触发,则需要按Alt + / 或者是 Ctrl + Space手动调用 (Ctrl + Space原先是Ec ...

  6. myeclipse的常用快捷键

    创建一个类 Alt+Shift+N,C,输入Demo,回车 创建类属性 按3次下方向键,回车,输入String name;,回车 创建构造器 Alt+Shift+S,O,回车 创建getter/set ...

  7. jenkins 构建时,取消构建测试类

    如图 点击配置,添加clean install  -Dmaven.test.skip=true 保存即可

  8. ZOJ 1012 Mainframe

    题目大意:有一台主机,有m个cpu和n的内存,有l个任务,每个任务需消耗一定的cpu和内存,给出任务的开始时间和截止时间,完成任务可获得一定的金钱,同时提前完成有奖金,延后完成要扣钱.计算到某个时间所 ...

  9. html 转义

    function escapeHTML(n) { var t = document.createElement("div"), i = document.createTextNod ...

  10. Git 入门 ---- Git 与 SVN 区别

    一. Git 是什么?        Git 是目前世界上最先进的分布式版本控制系统     二. 基础知识 有中心的 SCM(Software Configuration Management) 服 ...