vue使用jsx寫法如何實現動態元件功能?

2021-10-20 05:41:13 字數 947 閱讀 3056

什麼是動態元件?

已知在template寫法中,動態元件是這麼寫的

:is=

"currenttabcomponent"

/>

如果換成jsx想當然的會寫成這樣

/>
這樣會直接報錯

unknown custom element: - did you register the component correctly……

所以這裡換一種方式

方案1:用switch case方式

currenttabcomponent=

'a'handlechange

(name)

dynacomponent()

}render()

}>a<

/button>

}>b<

/button>

<

/div>);

}

此寫法也可以巢狀在keep-alive中

例如

<

/keep-alive>

方案2:使用createelement函式

在jsx中,render()帶乙個可選引數,這個引數就是createelement函式

關於createelement函式

示例:

currenttabcomponent=

'a'handlechange

(name)

render

(h)}

>a<

/button>

}>b<

/button>

<

/div>);

}

以上。

vue 使用jsx需要注意的問題

vue 使用jsx官網提供了一些方式,為什麼用jsx,因為jsx足夠靈活,模板引擎雖然比較簡單,但複雜dom結構仍然生成不了,我近期做了乙個遞迴生成dom結構的demo,因為遞迴的原因,普通的模板引擎實現不了這種,所以我用了jsx。引入jsx比較簡單,用這個 裡面提供的,增加這些依賴就可以了。其實用...

vue使用jsx繫結時間,元素,html欄位

來自 要監聽 jsx 中的事件,我們需要 on 字首。例如,將onclick用於單擊事件。render createelement button 複製 要修改事件,請使用 render createelement button 複製 繫結變數,注意這裡不是使用 render createelemen...

vue 倒序 實現 如何使用Vue實現評論框架

對相應模組實現元件化 能顯示發布者 發布時間以及內容 乍一看不是很難,但是在具體的實現上還是遇到了一些問題。此外,因為第一次使用 vue 看文件看的也是一臉懵逼,話不多說,下面來分析一下,具體每個模組是怎麼實現的。原始碼位址 引入元件 commentinput commentlist paginat...