Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明
組件通訊不是講完了嗎(上帝模式還沒講哈)，怎么又多了種方式啊。
你484傻，多一種選擇不好嗎？
其實(shí)這個不屬于組件通訊啦，只是當(dāng)父組件實(shí)例安裝和渲染完畢后，可以執(zhí)行installed這個方法(默認(rèn)是空函數(shù),是Component中的原型方法)，也就是生命周期中的一種。然后在這該方法中，
給子類的data賦值，然后update(),這種方式野蠻好玩的。
老規(guī)矩：先上demo代碼, 然后提出問題, 之后解答問題, 最后源碼說明。
class Hello extends Omi.Component {constructor(data) {super(data);}style() {return `h1 {cursor: pointer;}`;}handleClick(target, click) {console.log(target.innerHTML);}render() {return `<div><h1 οnclick="handleClick(this, event)">Hello, {{name}}!</h1></div> `;}};Omi.makeHTML('Hello', Hello);class App extends Omi.Component {constructor(data) {super(data);}installed() { // dom已經(jīng)插入到指定的dom容器中了this.hello.data.name = 'Sorrow.X'; // 給Hello類的實(shí)例hello添加name屬性this.update(); // 實(shí)例hello更新一下dom }render() {return `<div><Hello name="hello" /></div> `;}};var app = new App();Omi.render(app, 'body');?
demo的疑問和疑問的說明：
疑問1：
demo中的install方法是什么鬼？
答： 不是鬼，是類原型上的一個方法，這個方法Component類也有，只不過是空函數(shù)，子類如果重寫了這個方法，
? ? ? ?那么等到dom插入到指定的dom中后，就可以執(zhí)行該方法(后面會講解omi的生命周期)。
?
疑問2：
<Hello name="hello" />中的name對應(yīng)的hello又是啥啊？
答：
? ? 這個其實(shí)在組件那一篇文章就講解過了，name="hello"中的hello其實(shí)是Hello構(gòu)造函數(shù)的實(shí)例。看看怎么實(shí)現(xiàn)的
?
? ? ??
?
然后給了app這個實(shí)例對象
?
?
?
然后提取完孩子后，就回到Omi.render方法
?
?
之后調(diào)用install方法，如果子類沒重寫，那就調(diào)用Component自己的install空函數(shù)
?
是不是so easy. 我熱，我竟然會說英文。
?
ps:?
? ? 這個demo，就此結(jié)束了，作者應(yīng)該用此demo想證明一下，在omi中組件通訊就是這么簡單方便，當(dāng)然上帝模式還沒開啟，一旦開啟，真的要飛起了。
?
轉(zhuǎn)載于:https://www.cnblogs.com/sorrowx/p/6605708.html
總結(jié)
以上是生活随笔為你收集整理的Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
