Omi框架学习之旅 - 组件通讯(data-*通讯) 及原理说明

Posted 2020-09-05 Sorrow.X

老规矩：先上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}}! {{str}} {{bool}} {{num}} {{arr}}
                        </h1>
                    </div>
                `;
            }
        };

        Omi.makeHTML(‘Hello‘, Hello);

        class App extends Omi.Component {
            constructor(data) {
                super(data);
            }

            render() {
                return `
                    <div>
                        <Hello name=‘hel‘ data-name = "Sorrow.X" data-str = "str"/>
                        <Hello data-bool = true data-num = 111/>
                    </div>
                `;
            }
        };

        var app = new App();
        Omi.render(app, ‘body‘);

        setTimeout(() => {
            app.hel.data.name =‘名字‘;
            app.hel.data.name =‘str字符串‘;
            app.hel.update();
        }, 2000);