資訊專欄INFORMATION COLUMN
摘要：用函數(shù)化組件展示一個根據(jù)數(shù)據(jù)智能選擇不同組件的場景函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件主要適用于以下兩個場景程序化地在多個組件中選擇一個。
函數(shù)化組件
Vue提供了一個functional的布爾值選項，設(shè)置為true可以使組件無狀態(tài)和無實例，也就是沒有data和this上下文。這樣用render函數(shù)返回虛擬節(jié)點可以更容易渲染，因為函數(shù)化組件只是一個函數(shù)，渲染開銷要小很多。
使用函數(shù)化組件時，Render函數(shù)提供了第二個參數(shù)context來提供臨時上下文。組件需要的data、prop、slots、children、parent都是通過這個上下文來傳遞。比如this.level要改寫為context.props.level，this.$slots.default改變?yōu)?b>context.children。
用函數(shù)化組件展示一個根據(jù)數(shù)據(jù)智能選擇不同組件的場景：
See the Pen Vue-函數(shù)化組件-根據(jù)數(shù)據(jù)選擇組件 by whjin (@whjin) on CodePen.
函數(shù)化組件主要適用于以下兩個場景：
程序化地在多個組件中選擇一個。
在將children、props、data傳遞給子組件之前操作它們。
JSX為了讓Render函數(shù)更好地書寫和閱讀，Vue提供了插件babel-plugin-transform-vue-jsx來支持JSX語法。
使用createElement時，常用配置：
See the Pen Vue-createElement by whjin (@whjin) on CodePen.
JSX寫法：
See the Pen Vue-JSX by whjin (@whjin) on CodePen.
表格組件的所有的內(nèi)容（表頭和行數(shù)據(jù)）由兩個prop構(gòu)成：columns和data。兩者都是數(shù)組，columns用來描述每列的信息，并渲染在表頭內(nèi)，可以指定某一列是否需要排序；data時每一行的數(shù)據(jù)，由columns決定每一行里各列的順序。
為了讓排序后的columns和data不影響原始數(shù)據(jù)，給v-table組件的data選項添加兩個對應(yīng)的數(shù)據(jù)，組件所有的操作將在這兩個數(shù)據(jù)上完成，不對原始數(shù)據(jù)做任何處理。
columns的每一項是一個對象，其中title和key字段是必填的，用來標識這列的表頭標題，key的對應(yīng)data中列內(nèi)容的字段名。sortable是選填字段，如果值為true，說明該列需要排序。
v-talbe組件的prop:columns和data的數(shù)據(jù)已經(jīng)從父級傳遞過來，v-table不直接使用它們，而是使用data選項的currentColumns和currentData。所以在v-table初始化時，需要把columns和data賦值給currentColumns和currentData。在v-table的methods選項里定義兩個方法用來復(fù)制，并在mounted鉤子內(nèi)調(diào)用。
map()是JavaScript數(shù)組的一個方法，根據(jù)傳入的函數(shù)重新構(gòu)造一個新數(shù)組。
排序分升序(asc)和降序(desc)兩種，而且同時只能對一列數(shù)據(jù)進行排序，與其他列互斥，為了標識當(dāng)前列的排序狀態(tài)，在map列添加數(shù)據(jù)時，默認給每列都添加一個_sortType的字段，并且賦值為normal，表示默認排序（也就是不排序）。
在排序后，currentData每項的順序可能都會發(fā)生變化，所以給currentColumns和currentData的每個數(shù)據(jù)都添加_index字段，代表當(dāng)前數(shù)據(jù)在原始數(shù)據(jù)中的索引。
render(h) {
var ths = [],
trs = [];
return h("table", [
h("thead", [
h("tr", ths)
]),
h("tbody", trs)
])
}
這里的h就是createElement，只是換了個名稱。
表格主題trs是一個二維數(shù)組，數(shù)據(jù)由currentColumns和currentData組成。
先遍歷所有的行，然后再每一行內(nèi)再遍歷各列，最終組合出主題內(nèi)容節(jié)點trs。
如果col.sortable沒有定義，或值為false，就直接把col.title渲染出來，否則除了渲染title，還加了兩個元素來實現(xiàn)升序和降序的操作。
排序使用了JavaScript數(shù)組的sort()方法，這里之所以返回1或-1，而不直接返回a[key]
排序前，先將所有列的排序狀態(tài)都重置為normal，然后設(shè)置當(dāng)前列的排序狀態(tài)（asc或desc），對用到render的元素的class名稱on，后面通過CSS來高亮顯示當(dāng)前列的排序狀態(tài)。
當(dāng)渲染完表格后，父級修改了data數(shù)據(jù)，比如增加或刪除，v-table的currentData也應(yīng)該更新，如果某列已經(jīng)存在排序狀態(tài)，更新后應(yīng)該直接處理一次排序。
通過遍歷currentColumns來找出是否按某一列進行過排序，如果有，就按照當(dāng)前排序狀態(tài)對更新后的數(shù)據(jù)做一次排序操作。
See the Pen Vue-可排序表格組件 by whjin (@whjin) on CodePen.
發(fā)布一條留言，需要的數(shù)據(jù)有昵稱和留言內(nèi)容，發(fā)布操作應(yīng)該在根實例app內(nèi)完成。留言列表的數(shù)據(jù)也是從app獲取。
數(shù)組list存儲了所有的留言內(nèi)容，通過函數(shù)handleSend給list添加一項留言數(shù)據(jù)，添加成后把texrarea文本框置空。
Render函數(shù)內(nèi)的節(jié)點使用v-model：動態(tài)綁定value，并且監(jiān)聽input事件，把輸入的內(nèi)容通過$emit("input")派發(fā)給父組件。
列表數(shù)據(jù)list為空時，渲染一個“列表為空”的信息提示節(jié)點；不為空時，每個list-item贏包含昵稱、留言內(nèi)容和回復(fù)按鈕3個子節(jié)點。
this.list.forEach相當(dāng)于template里的v-for指令，遍歷出每條留言。句柄handleReply直接向父組件派發(fā)一個事件reply，父組件(app)接收后，將當(dāng)前list-item的昵稱提取，并設(shè)置到v-textarea內(nèi)。
See the Pen Vue-留言列表 by whjin (@whjin) on CodePen.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/95378.html
摘要：用函數(shù)化組件展示一個根據(jù)數(shù)據(jù)智能選擇不同組件的場景函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件根據(jù)數(shù)據(jù)選擇組件函數(shù)化組件主要適用于以下兩個場景程序化地在多個組件中選擇一個。 學(xué)習(xí)筆記：函數(shù)化組件 函數(shù)化組件 Vue提供了一個functional的布爾值選項，設(shè)置為true可以使組件無狀態(tài)和無實例，也就是沒有data和this上下文。這樣用render函數(shù)返回虛擬節(jié)點可以更容易渲染，因為函數(shù)化...
摘要：右側(cè)展現(xiàn)對應(yīng)產(chǎn)品。我們使用命名為的對象表示過濾條件信息，如下此數(shù)據(jù)需要在組件中進行維護。因為組件的子組件和都將依賴這項數(shù)據(jù)狀態(tài)。化應(yīng)用再回到之前的場景，我們設(shè)計化函數(shù)，進一步可以簡化為對于的偏應(yīng)用即上面提到的相信大家已經(jīng)理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...
摘要：右側(cè)展現(xiàn)對應(yīng)產(chǎn)品。我們使用命名為的對象表示過濾條件信息，如下此數(shù)據(jù)需要在組件中進行維護。因為組件的子組件和都將依賴這項數(shù)據(jù)狀態(tài)?；瘧?yīng)用再回到之前的場景，我們設(shè)計化函數(shù)，進一步可以簡化為對于的偏應(yīng)用即上面提到的相信大家已經(jīng)理解了這么做的好處。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...
react組件 參考：https://facebook.github.io/re... react的組件是其核心思想部分，react允許將整個ui設(shè)計分割稱為獨立的、可復(fù)用的隔離模塊，react的組件是一個抽象的類，直接使用reacy.component是沒有很大意義的，所以一般使用的方法就是定義一個 class 來繼承這個component，并且需要實現(xiàn)方法 render（）；就像下面一樣： ...
閱讀 2898·2023-04-26 02:28
閱讀 2921·2021-09-27 13:36
閱讀 3286·2021-09-03 10:29
閱讀 2931·2021-08-26 14:14
閱讀 2246·2019-08-30 15:56
閱讀 983·2019-08-29 13:46
閱讀 2790·2019-08-29 13:15
閱讀 580·2019-08-29 11:29
