vue函數(shù)式組件是一個(gè)不包含狀態(tài)和實(shí)例的組件;該組件不支持響應(yīng)式,并且不能通過this關(guān)鍵字引用,用于定義沒有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場(chǎng)景,只接受一些props來顯示組件。
本文操作環(huán)境:windows10系統(tǒng)、Vue2.9.6版,DELL G3電腦。
vue函數(shù)式組件是什么
Vue 提供了一種稱為函數(shù)式組件的組件類型,用來定義那些沒有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場(chǎng)景,它只接受一些props 來顯示組件。
函數(shù)組件(不要與 Vue 的 render 函數(shù)混淆)是一個(gè)不包含狀態(tài)和實(shí)例的組件。
簡單的說,就是組件不支持響應(yīng)式,并且不能通過 this 關(guān)鍵字引用自己。
訪問組件屬性
slots: 一個(gè)返回 slots 對(duì)象的函數(shù)
沒有狀態(tài)或?qū)嵗?,你可能?huì)好奇如何引用數(shù)據(jù)或方法,Vue為底層的 render 函數(shù)提供一個(gè) context 參數(shù)對(duì)象。
這個(gè) context 參數(shù)對(duì)象具有下列屬性:
-
props: 所有的 props 對(duì)象
-
children: VNode 子節(jié)點(diǎn)數(shù)組
-
scopedSlots: (vue2.6.0+) 暴露傳入作用域插槽的對(duì)象。將普通插槽作為函數(shù)暴露出去
-
data: 全部的數(shù)據(jù)對(duì)象,作為 createElement 函數(shù)的第二個(gè)參數(shù)傳遞給組件
-
parent: 對(duì)父組件的引用
-
listeners: (vue2.3.0+) 包含父級(jí)注冊(cè)的事件偵聽器的對(duì)象。也是 data.on 的別名
-
injections: (v2.3.0+) 如果使用了 inject 選項(xiàng),則該對(duì)象包含了應(yīng)當(dāng)被注入的屬性
訪問這個(gè) context 參數(shù)非常簡單,例如,我們想使用 props,可以這樣做:
在 Template 中訪問組件的 context
在 render 函數(shù)中訪問組件的 context
【