Omi教程 元件

omi框架完全基於元件體系設計，我們希望開發者可以像搭積木一樣製作web程式，一切皆是元件，元件也可以巢狀子元件形成新的元件，新的元件又可以當作子元件巢狀至任意元件形成新的元件...

這裡使用todo的例子來講解omi元件體系的使用。

class todo extends omi.component 

add (evt) 
style () 
button`;}
handlechange(target)
render () 
}omi.render(new todo(),"body");

這裡需要特別強調的是，為了更加的自由和靈活度。omi沒有內建資料變更的自動更新，需要開發者自己呼叫update方法。

你也可以和oba或者mobx一起使用來實現自動更新。

如果頁面超級簡單的話，可以沒有元件巢狀。但是絕大部分web網頁或者web應用，需要巢狀定義的元件來完成所有的功能和展示。比如上面的todo，我們也是可以抽取出list。

這樣讓程式易維護、可擴充套件、方便復用。如，我們抽取出list：

class list extends omi.component 

render () 
}

import list from './list.js';

omi.makehtml('list', list);
class todo extends omi.component ;
}add (evt) 
style () 
button`;}
handlechange(target)
render () 
}

這樣做的目的主要是希望以後dom的變更都盡量修改子元件自身的data，然後再呼叫其update方法，而不是去更改父元件的listdata。

關於omi元件通訊其實有4種方案，這個後續教程會專門來講。

Omi教程 元件通訊

omi框架組建間的通訊非常遍歷靈活，因為有許多可選方案進行通訊 所以通訊變得暢通無阻，下面一一來舉例說明。class hello extends omi.component style handleclick target,evt render omi.makehtml hello hello om...

Omi教程 元件通訊

omi框架組建間的通訊非常遍歷靈活，因為有許多可選方案進行通訊 所以通訊變得暢通無阻，下面一一來舉例說明。class hello extends omi.component style handleclick target,evt render omi.makehtml hello hello om...

Omi教程 元件通訊

omi框架組建間的通訊非常遍歷靈活，因為有許多可選方案進行通訊 所以通訊變得暢通無阻，下面一一來舉例說明。class hello extends omi.component style handleclick target,evt render omi.makehtml hello hello om...