Omi教程-組件通信攻略大全

組件通信

Omi框架組建間的通信很是遍歷靈活，由於有許多可選方案進行通信：

• 經過在組件上聲明 data-* 傳遞給子節點
• 經過在組件上聲明 data 傳遞給子節點 （支持複雜數據類型的映射）
• 父容器設置 childrenData 自動傳遞給子節點
• 聲明 group-data 傳遞（支持複雜數據類型的映射）
• 徹底面向對象，能夠很是容易地拿到對象的實例，以後能夠設置實例屬性和調用實例的方法

因此通信變得暢通無阻，下面一一來舉例說明。

data-*通信

class Hello extends Omi.Component {
    constructor(data) {
      super(data);
    }
    style () {
      return  `
      h1{
        cursor:pointer;
      }
      `;
    }
    handleClick(target, evt){
      alert(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);
    }
  
    render() {
        return  `
        <div>
            <Hello data-name="Omi" />
        </div>
        `;
    }
}

Omi.render(new App(),"#container");

通常data-用來傳遞值類型，如string、number。值得注意的是，經過data-接收到的數據類型都是string，須要自行轉成number類型。
一般狀況下，data-能知足咱們的要求，可是遇到複雜的數據類型是沒有辦法經過大量data-去表達，因此能夠經過data通信，請往下看。

data通信

如上面代碼所示，經過 data-name="Omi"能夠把name傳遞給子組件。下面的代碼也能夠達到一樣的效果。

...
class App extends Omi.Component {
    constructor(data) {
      super(data);
      this.helloData = { name : 'Omi' };
    }
  
    render() {
        return  `
        <div>
            <Hello data="helloData" />
        </div>
        `;
    }
}

Omi.render(new App(),"#container");

使用data聲明，會去組件的instance（也就是this）下找對應的屬性，this下能夠掛載任意複雜的對象。因此這也就突破了data-*的侷限性。

若是instance下面的某個屬性下面的某個屬性下面的某個數組的第一個元素的某個屬性要做爲data傳遞Hello怎麼辦？
不要緊，data聲明是支持複雜類型的，使用方式以下:

...
class App extends Omi.Component {
    constructor(data) {
        super(data);
        this.complexData ={
            a:{
                b:{
                    c:[
                        {
                            e:[{
                                name:'ComplexData Support1'
                            },{
                                name:'ComplexData Support2'
                            }]
                        },
                        {
                            name: 'ComplexData Support3'
                        }
                    ]
                }
            }
        };
    }
  
    render() {
        return  `
        <div>
            <Hello data="complexData.a.b.c[1]" />
        </div>
        `;
    }
}
...

點擊這裏→data映射覆雜數據

childrenData通信

...
class App extends Omi.Component {
    constructor(data) {
      super(data);
      this.childrenData = [{ name : 'Omi' } , { name : 'dntzhang' }];
    }
  
    render() {
        return  `
        <div>
            <Hello  />
            <Hello  />
        </div>
        `;
    }
}

Omi.render(new App(),"#container");

通用this.childrenData傳遞data給子組件，childrenData是一個數組類型，因此支持同時給多個組件傳遞data，與render裏面的組件會一一對應上。

group-data通信

childrenData的方式能夠批量傳遞數據給組件，可是有不少場景下data的來源不必定非要都從childrenData來，childrenData是個數組，會和組件的順序一一對應，這就給不一樣傳遞方式的data必須所有集中的childrenData中，很是不方便。group-data專門爲解決上面的痛點而生，專門是爲了給一組組件批量傳遞data。

import Hello from './hello.js';


Omi.makeHTML('Hello', Hello);

class App extends Omi.Component {
    constructor(data) {
        super(data);
        this.testData = [{name: 'Omi'}, {name: 'dntzhang'}, {name: 'AlloyTeam'}];
    }

    render() {
        return  `
        <div>
            <Hello group-data="testData" />
            <Hello group-data="testData" />
            <Hello group-data="testData" />
        </div>
        `;

    }
}

Omi.render(new App(),"#container");

只須要在聲明的子組件上標記group-data，就會去當前組件的instance（也就是this）下面找對應的屬性，而後根據當前的位置，和對應數組的位置會一一對應起來。

運行結果以下：

點擊這裏→group-data

一樣group-data支持複雜數據類型的映射，須要注意的是，group-data映射的終點必須是一個數組:

import Hello from './hello.js';


Omi.makeHTML('Hello', Hello);

class App extends Omi.Component {
    constructor(data) {
        super(data);
        this.complexData ={
            a:{
                b:{
                    c:[
                        {
                            e:[{
                                name:'ComplexData Support1'
                            },{
                                name:'ComplexData Support2'
                            }]
                        },
                        {
                            name: 'ComplexData Support3'
                        }
                    ]
                }
            }
        };
    }

    render() {
        return  `
        <div>
            <Hello group-data="complexData.a.b.c[0].e" />
            <Hello group-data="complexData.a.b.c[0].e" />
        </div>
        `;

    }
}

Omi.render(new App(),"#container");

點擊這裏→group-data映射覆雜數據

經過對象實例

...
class App extends Omi.Component {
    constructor(data) {
        super(data);
    }
    
    installed(){
        this.hello.data.name = "Omi";
        this.update()
    }
  
    render() {
        return  `
        <div>
            <Hello name="hello" />
        </div>
        `;
    }
}

Omi.render(new App(),"#container");

經過omi-id

...
class App extends Omi.Component {
    constructor(data) {
        super(data);
    }
    
    installed(){
        Omi.get("hello").data.name = "Omi";
        this.update()
    }
  
    render() {
        return  `
        <div>
            <Hello omi-id="hello" />
        </div>
        `;

    }
}

Omi.render(new App(),"#container");

經過在組件上聲明omi-id，在程序任何地方拿到該對象的實例。這個能夠算是跨任意組件通信神器。

特別強調

• 經過childrenData或者data方式通信都是一錘子買賣。後續變動只能經過組件實例下的data屬性去更新組件
• 經過data-✼通信也是一錘子買賣。後續變動只能經過組件實例下的data屬性去更新組件。
• 關於data-✼通信也能夠不是一錘子買賣，可是要設置組件實例的dataFirst爲false，這樣的話data-✼就會覆蓋組件實例的data對應的屬性

關於上面的第三條也就是這樣的邏輯僞代碼：

if(this.dataFirst){
    this.data = Object.assign({},data-✼ ,this.data);
}else{
    this.data = Object.assign({},this.data, data-✼);
}

招募計劃

• Omi的Github地址https://github.com/AlloyTeam/omi
• 若是想體驗一下Omi框架，請點擊Omi Playground
• 若是想使用Omi框架，請閱讀 Omi使用文檔
• 若是想一塊兒開發完善Omi框架，有更好的解決方案或者思路，請閱讀 從零一步步打造web組件化框架Omi
• 關於上面的兩類文檔，若是你想得到更佳的閱讀體驗，能夠訪問Docs Website
• 若是你懶得搭建項目腳手架，能夠試試Scaffolding for Omi
• 若是你有Omi相關的問題能夠New issue
• 若是想更加方便的交流關於Omi的一切能夠加入QQ的Omi交流羣(256426170)