寫在前面
Omi框架可以通過在組件上聲明 data-* 把屬性傳遞給子節點。
Omi從設計之初，就是往標準的DOM標簽的標準傳遞方式靠齊。比如：
這樣會有什么局限性和問題？如：
那么支持傳遞javascript表達式就能解決這些痛點。
廢話不多說，來看神器的冒號。
冒號標記
看下面例子：
import Hello from 'hello.js'Omi.makeHTML('Hello', Hello);class App extends Omi.Component { render() { return ` <div> <Hello :data-user="{ name : 'Dntzhang', favorite : 'Omi' }" /> </div> ` }}Omi.render(new App(),"#container")在data-user前面加上冒號即:data-user，就代表傳遞的是js 表達式，夠方便吧。
然后在Hello組件內就可以直接使用。
class Hello extends Omi.Component { render() { return ` <div> <h1>{{user.name}} love {{user.favorite}}.</h1> </div> ` }}你也可以在hello組件內打印出 this.data.user 試試。
傳遞其他類型
上面的例子展示了傳遞JSON，其他類型也支持。比如：
<Hello :data-age="18" /> <Hello :data-xxx="1+1*2/3" /> <Hello :data-is-girl="false" /> <Hello :data-array-test="[1,2,3]" />
復雜類型
最后給大家看個稍微一丁點復雜的案例:
class Hello extends Omi.Component { handleClick(evt){ alert( this.data.arrayTest[0].name) } render() { return ` <ul> {{#arrayTest}} <li onclick="handleClick">{{name}}</li> {{/arrayTest}} </ul> `; }}Omi.makeHTML('Hello', Hello);class App extends Omi.Component { render() { return ` <div> <Hello :data-array-test="[{name:'dntzhang'},{name:'omi'},{name:'AlloyTeam'}]" /> </div> `; }}Omi.render(new App(),"#container");當然，在子組件中，你也可以不使用 mustache.js模板引擎的語法去遍歷，使用ES6+的姿勢去遍歷。
class Hello extends Omi.Component { render() { return ` <ul> ${this.data.arrayTest.map(item => `<li>${item.name}</li>` ).join('')} </ul> `; }}這也是為什么omi提供了兩個版本，omi.js和omi.lite.js的原因。omi.lite.js不包含mustache.js模板引擎。
以上所述是小編給大家介紹的Omi v1.0.2發布正式支持傳遞javascript表達式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
