函數化組件
Vue供應了一個functional
的布爾值選項,設置為true
能夠使組件無狀況和無實例,也就是沒有data
和this
上下文。如許用render
函數返回假造節點能夠更輕易襯着,由於函數化組件只是一個函數,襯着開支要小許多。
運用函數化組件時,Render函數供應了第二個參數context
來供應暫時上下文。組件須要的data
、prop
、slots
、children
、parent
都是經由過程這個上下文來通報。比方this.level
要改寫為context.props.level
,this.$slots.default
改變成context.children
。
用函數化組件展現一個依據數據智能挑選差別組件的場景:
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”mKRKGm” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-函數化組件-依據數據挑選組件” class=”codepen”>See the Pen Vue-函數化組件-依據數據挑選組件 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
函數化組件重要適用於以下兩個場景:
- 程序化地在多個組件中挑選一個。
- 在將
children
、props
、data
通報給子組件之前操縱它們。
JSX
為了讓Render函數更好地謄寫和瀏覽,Vue供應了插件babel-plugin-transform-vue-jsx
來支撐JSX語法。
運用createElement
時,經常使用設置:
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”Vdpwpz” data-default-tab=”js” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-createElement” class=”codepen”>See the Pen Vue-createElement by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
JSX寫法:
<p data-height=”300″ data-theme-id=”0″ data-slug-hash=”eKvYvm” data-default-tab=”js” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-JSX” class=”codepen”>See the Pen Vue-JSX by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
實戰:運用Render函數開闢可排序的表格組件
表格組件的一切的內容(表頭和行數據)由兩個prop
構成:columns
和data
。二者都是數組,columns
用來形貌每列的信息,並襯着在表頭<head>
內,能夠指定某一列是不是須要排序;data
時每一行的數據,由columns
決議每一行里各列的遞次。
為了讓排序后的columns
和data
不影響原始數據,給v-table
組件的data
選項增添兩個對應的數據,組件一切的操縱將在這兩個數據上完成,不對原始數據做任何處置懲罰。
columns
的每一項是一個對象,个中title
和key
字段是必填的,用來標識這列的表頭題目,key
的對應data
中列內容的字段名。sortable
是選填字段,假如值為true
,申明該列須要排序。
v-talbe
組件的prop:columns
和data
的數據已從父級通報過來,v-table
不直接運用它們,而是運用data
選項的currentColumns
和currentData
。所以在v-table
初始化時,須要把columns
和data
賦值給currentColumns
和currentData
。在v-table
的methods
選項里定義兩個要領用來複制,並在mounted
鈎子內挪用。
map()
是JavaScript數組的一個要領,依據傳入的函數從新組織一個新數組。
排序分升序(asc
)和降序(desc
)兩種,而且同時只能對一列數據舉行排序,與其他列互斥,為了標識當前線的排序狀況,在map
列增添數據時,默許給每列都增添一個_sortType
的字段,而且賦值為normal
,示意默許排序(也就是不排序)。
在排序后,currentData
每項的遞次能夠都邑發生變化,所以給currentColumns
和currentData
的每一個數據都增添_index
字段,代表當前數據在原始數據中的索引。
render(h) {
var ths = [],
trs = [];
return h('table', [
h('thead', [
h('tr', ths)
]),
h('tbody', trs)
])
}
這裏的h
就是createElement
,只是換了個稱號。
表格主題trs
是一個二維數組,數據由currentColumns
和currentData
構成。
先遍歷一切的行,然後再每一行內再遍歷各列,終究組合出主題內容節點trs
。
假如col.sortable
沒有定義,或值為false
,就直接把col.title
襯着出來,不然除了襯着title
,還加了兩個<a>
元夙來完成升序和降序的操縱。
排序運用了JavaScript數組的sort()
要領,這裏之所以返回1
或-1
,而不直接返回a[key]<b[key]
,也就是true
或false
,是由於在部份瀏覽器對sort()
的處置懲罰差別,而1
和-1
能夠做到兼容。
排序前,先將一切列的排序狀況都重置為normal
,然後設置當前線的排序狀況(asc
或desc
),對用到render的<a>
元素的class
稱號on
,背面經由過程CSS來高亮顯現當前線的排序狀況。
當襯着完表格后,父級修改了data
數據,比方增添或刪除,v-table
的currentData
也應當更新,假如某列已存在排序狀況,更新后應當直接處置懲罰一次排序。
經由過程遍歷currentColumns
來找出是不是按某一列舉行過排序,假如有,就根據當前排序狀況對更新后的數據做一次排序操縱。
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”XYMmJr” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-可排序表格組件” class=”codepen”>See the Pen Vue-可排序表格組件 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>
實戰:留言列表
宣布一條留言,須要的數據有昵稱和留言內容,宣布操縱應當在根實例app
內完成。留言列表的數據也是從app
獵取。
數組list
存儲了一切的留言內容,經由過程函數handleSend
給list
增添一項留言數據,增添成后把texrarea
文本框置空。
Render函數內的節點運用v-model
:動態綁定value
,而且監聽input
事宜,把輸入的內容經由過程$emit('input')
派發給父組件。
列表數據list
為空時,襯着一個“列表為空”的信息提醒節點;不為空時,每一個list-item
贏包括昵稱、留言內容和復興按鈕3個子節點。
this.list.forEach
相當於template
里的v-for
指令,遍歷出每條留言。句柄handleReply
直接向父組件派發一個事宜reply
,父組件(app
)吸收后,將當前list-item
的昵稱提取,並設置到v-textarea
內。
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”ZRKGrR” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-留言列表” class=”codepen”>See the Pen Vue-留言列表 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>