摘要：用函數化組件展示一個根據數據智能選擇不同組件的場景函數化組件根據數據選擇組件函數化組件根據數據選擇組件函數化組件主要適用于以下兩個場景程序化地在多個組件中選擇一個。

學習筆記：函數化組件

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

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

用函數化組件展示一個根據數據智能選擇不同組件的場景：

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

JSX寫法：

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

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

數組list存儲了所有的留言內容，通過函數handleSend給list添加一項留言數據，添加成后把texrarea文本框置空。

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

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

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

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