Omi框架学习之旅

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

你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');