Omi教程 元件通訊

2021-07-27 03:12:54 字數 1545 閱讀 6344

omi框架組建間的通訊非常遍歷靈活,因為有許多可選方案進行通訊:

所以通訊變得暢通無阻,下面一一來舉例說明。

class hello extends

omi.component

style () `;

}handleclick(target, evt)

render()

}omi.makehtml('hello'

, hello);

omi.component

render()

}omi.render(new

"#container");

一般data-用來傳遞值型別,如string、number。值得注意的是,通過data-接收到的資料型別都是string,需要自行轉成number型別。

通常情況下,data-能滿足我們的要求,但是遇到複雜的資料型別是沒有辦法通過大量data-去表達,所以可以通過data通訊,請往下看。

如上面**所示,通過 data-name="omi"可以把name傳遞給子元件。下面的**也可以達到同樣的效果。

...

omi.component;}

render()

}omi.render(new

"#container");

使用data宣告,會去元件的instance(也就是this)下找對應的屬性,this下可以掛載任意複雜的物件。所以這也就突破了data-*的侷限性。

...

omi.component];}

render()

}omi.render(new

"#container");

通用this.childrendata傳遞data給子元件,childrendata是乙個陣列型別,所以支援同時給多個元件傳遞data,與render裡面的元件會一一對應上。

...

omi.component

installed()

render()

}omi.render(new

"#container");

...

omi.component

installed()

render()

}omi.render(new

"#container");

通過在元件上宣告omi-id,在程式任何地方拿到該物件的例項。這個可以算是跨任意元件通訊神器。

關於上面的第三條也就是這樣的邏輯偽**:

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 cl...