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

这个demo是通过omi-id来获取子类的实例，然后更改data属性，之后updata一下就好了。

老规矩：先上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() {
                Omi.get('hello').data.name = 'Sorrow.X';    // get方法是Omi上的一个静态方法
                this.update();
            }

            

            render() {
                return `
                    <div>
                        <Hello omi-id="hello" />   
                    </div>
                `;
            }
        };

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

结果也一样哈

 

demo的疑问和疑问的说明：

疑问1：

<Hello omi-id="hello" />中的omi-id是什么鬼？对应的hello又是什么鬼？

答：

      都是好鬼，而且都是女鬼。

      omi-id呢，其实会把它对应的属性值就是hello，hello其实就是 Hello类的实例，然后呢就把 hello: Hello实例，放到了Omi.mapping = {};这个对象去了。

      我们怎么取出实例呢，通过omi的静态get方法即可。

    Omi.get = function(name){
        return Omi.mapping[name]
    }

      来看看怎么实现的,如下

 

 

在这里给我们添加进Omi.mapping中的

 

 

然后就这么拿到了。

再然后女鬼就是你的了。

 

ps: 

    omi-id，是我个人比较喜欢的，因为可以跨组件拿到实例，然后想干嘛就干嘛，爽歪歪。