摘要：用函數(shù)化組件展示一個(gè)根據(jù)數(shù)據(jù)智能選擇不同組件的場(chǎng)景函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件主要適用于以下兩個(gè)場(chǎng)景程序化地在多個(gè)組件中選擇一個(gè)。

Vue提供了一個(gè)functional的布爾值選項(xiàng)，設(shè)置為true可以使組件無狀態(tài)和無實(shí)例，也就是沒有data和this上下文。這樣用render函數(shù)返回虛擬節(jié)點(diǎn)可以更容易渲染，因?yàn)楹瘮?shù)化組件只是一個(gè)函數(shù)，渲染開銷要小很多。

使用函數(shù)化組件時(shí)，Render函數(shù)提供了第二個(gè)參數(shù)context來提供臨時(shí)上下文。組件需要的data、prop、slots、children、parent都是通過這個(gè)上下文來傳遞。比如this.level要改寫為context.props.level，this.$slots.default改變?yōu)?b>context.children。

用函數(shù)化組件展示一個(gè)根據(jù)數(shù)據(jù)智能選擇不同組件的場(chǎng)景：

See the Pen Vue-函數(shù)化組件-根據(jù)數(shù)據(jù)選擇組件 by whjin (@whjin) on CodePen.

JSX寫法：

See the Pen Vue-JSX by whjin (@whjin) on CodePen.

發(fā)布一條留言，需要的數(shù)據(jù)有昵稱和留言內(nèi)容，發(fā)布操作應(yīng)該在根實(shí)例app內(nèi)完成。留言列表的數(shù)據(jù)也是從app獲取。

數(shù)組list存儲(chǔ)了所有的留言內(nèi)容，通過函數(shù)handleSend給list添加一項(xiàng)留言數(shù)據(jù)，添加成后把texrarea文本框置空。

Render函數(shù)內(nèi)的節(jié)點(diǎn)使用v-model：動(dòng)態(tài)綁定value，并且監(jiān)聽input事件，把輸入的內(nèi)容通過$emit("input")派發(fā)給父組件。

列表數(shù)據(jù)list為空時(shí)，渲染一個(gè)“列表為空”的信息提示節(jié)點(diǎn)；不為空時(shí)，每個(gè)list-item贏包含昵稱、留言內(nèi)容和回復(fù)按鈕3個(gè)子節(jié)點(diǎn)。

this.list.forEach相當(dāng)于template里的v-for指令，遍歷出每條留言。句柄handleReply直接向父組件派發(fā)一個(gè)事件reply，父組件(app)接收后，將當(dāng)前list-item的昵稱提取，并設(shè)置到v-textarea內(nèi)。

See the Pen Vue-留言列表 by whjin (@whjin) on CodePen.