Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

时间:2021-09-23 22:57:12

组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊。

你484傻,多一种选择不好吗?

其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空函数,是Component中的原型方法),也就是生命周期中的一种。然后在这该方法中,

给子类的data赋值,然后update(),这种方式野蛮好玩的。

老规矩:先上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 onclick="handleClick(this, event)">
Hello, {{name}}!
</h1>
</div>
`;
}
}; Omi.makeHTML('Hello', Hello); class App extends Omi.Component {
constructor(data) {
super(data);
} installed() { // dom已经插入到指定的dom容器中了
this.hello.data.name = 'Sorrow.X'; // 给Hello类的实例hello添加name属性
this.update(); // 实例hello更新一下dom
} render() {
return `
<div>
<Hello name="hello" />
</div>
`;
}
}; var app = new App();
Omi.render(app, 'body');

demo的疑问和疑问的说明:

疑问1:

demo中的install方法是什么鬼?

答: 不是鬼,是类原型上的一个方法,这个方法Component类也有,只不过是空函数,子类如果重写了这个方法,

那么等到dom插入到指定的dom中后,就可以执行该方法(后面会讲解omi的生命周期)。

疑问2:

<Hello name="hello" />中的name对应的hello又是啥啊?

答:

这个其实在组件那一篇文章就讲解过了,name="hello"中的hello其实是Hello构造函数的实例。看看怎么实现的

Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

然后给了app这个实例对象

Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

然后提取完孩子后,就回到Omi.render方法

Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

之后调用install方法,如果子类没重写,那就调用Component自己的install空函数

Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

是不是so easy. 我热,我竟然会说英文。

ps:

这个demo,就此结束了,作者应该用此demo想证明一下,在omi中组件通讯就是这么简单方便,当然上帝模式还没开启,一旦开启,真的要飞起了。