Omi教程-组件

【Omi教程-组件】的更多相关文章

组件 Omi框架完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件... 简单组件这里使用Todo的例子来讲解Omi组件体系的使用. class Todo extends Omi.Component { constructor(data) { super(data); } add (evt) { evt.preventDefault(); this.data.items.push…

Omi教程-组件通讯

组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点通过在组件上声明 data 传递给子节点父容器设置 childrenData 自动传递给子节点完全面向对象,可以非常容易地拿到对象的实例,之后可以设置实例属性和调用实例的方法所以通讯变得畅通无阻,下面一一来举例说明. data-*通讯 class Hello extends Omi.Component { constructor(data) { super(data);…

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

组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设置 childrenData 自动传递给子节点声明 group-data 传递(支持复杂数据类型的映射) 完全面向对象,可以非常容易地拿到对象的实例,之后可以设置实例属性和调用实例的方法所以通讯变得畅通无阻,下面一一来举例说明. data-*通讯 class Hello extends Omi.…

Omi教程-使用group-data通讯

写在前面 Omi框架组建间的通讯非常遍历灵活,上篇文章介绍了几种通讯方式,其中childrenData的方式可以批量传递数据给组件,但是有很多场景下data的来源不一定非要都从childrenData来,childrenData是个数组,会和组件的顺序一一对应,这就给不同传递方式的data必须全部集中的childrenData中,非常不方便. 这篇介绍下group-data通讯,专门为解决上面的痛点而生,看名字就知道group-data专门是为了给一组组件批量传递data. group-data…

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

组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设置 childrenData 自动传递给子节点声明 group-data 传递(支持复杂数据类型的映射) 完全面向对象,可以非常容易地拿到对象的实例,之后可以设置实例属性和调用实例的方法所以通讯变得畅通无阻,下面一一来举例说明. data-*通讯 class Hello extends Omi.…

Omi教程-生命周期和事件处理

生命周期名称含义时机 constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理实例化 installed 安装完成,HTML已经插入页面之后执行实例化 uninstall 卸载组件.执行remove方法会触发该事件销毁时 beforeUpdate 更新前存在期 afterUpdate 更新后存在期示意图需要注意的是installed在实例化期也会执行,上图没有标出.比如组件被移除再进行还原会执行,再比如新增新的组件也会执…

Omi教程-插件体系

插件体系 Omi是Web组件化框架,怎么又来了个插件的概念? 可以这么理解: Omi插件体系可以赋予dom元素一些能力,并且可以和组件的实例产生关联. omi-drag 且看这个例子: 点击这里→在线试试 import OmiDrag from './omi-drag.js'; OmiDrag.init(); class App extends Omi.Component { constructor(data) { super(data); } render() { return ` <div>…