這篇文章主要介紹了Omi v1.0.2如何傳遞javascript表達式，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供蘭坪網(wǎng)站建設、蘭坪做網(wǎng)站、蘭坪網(wǎng)站設計、蘭坪網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、蘭坪企業(yè)網(wǎng)站模板建站服務，10多年蘭坪做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

Omi框架可以通過在組件上聲明 data-* 把屬性傳遞給子節(jié)點。

Omi從設計之初，就是往標準的DOM標簽的標準傳遞方式靠齊。比如：

• 下劃線自動轉駝峰， data-page-index傳到子組件就變成this.data.pageIndex

• data-xx 傳遞到子節(jié)點全都變成字符串，如data-page-index="1"到子節(jié)點中this.data.pageIndex就是字符串"1"

這樣會有什么局限性和問題？如：

• 無法傳遞JSON

• 無法傳遞number類型

• 無法傳遞bool類型

那么支持傳遞javascript表達式就能解決這些痛點。

廢話不多說，來看神器的冒號。

冒號標記

看下面例子：

import Hello from 'hello.js'
Omi.makeHTML('Hello', Hello);
class App extends Omi.Component {
 render() {
 return `
 

 
 
 `
 }
}
Omi.render(new App(),"#container")

在data-user前面加上冒號即:data-user，就代表傳遞的是js 表達式，夠方便吧。

然后在Hello組件內就可以直接使用。

class Hello extends Omi.Component {
 render() {
 return `
 

 
{{user.name}} love {{user.favorite}}.
 
 `
 }
}

你也可以在hello組件內打印出 this.data.user 試試。

傳遞其他類型

上面的例子展示了傳遞JSON，其他類型也支持。比如：

復雜類型

最后給大家看個稍微一丁點復雜的案例:

class Hello extends Omi.Component {
 handleClick(evt){
 alert( this.data.arrayTest[0].name)
 }
 render() {
 return `
 

 {{#arrayTest}}
 {{name}}
 {{/arrayTest}}
 
 `;
 }
}
Omi.makeHTML('Hello', Hello);
class App extends Omi.Component {
 render() {
 return `
 

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

當然，在子組件中，你也可以不使用 mustache.js模板引擎的語法去遍歷，使用ES6+的姿勢去遍歷。

class Hello extends Omi.Component {
 render() {
 return `
 

 ${this.data.arrayTest.map(item =>
 `
${item.name}
`
 ).join('')}
 
 `;
 }
}

這也是為什么omi提供了兩個版本，omi.js和omi.lite.js的原因。omi.lite.js不包含mustache.js模板引擎。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Omi v1.0.2如何傳遞javascript表達式”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!