Vue函數(shù)式組件-你值得擁有
更新時間：2019年05月09日 09:14:33 作者：GeekQiaQia
這篇文章主要介紹了Vue函數(shù)式組件及vue函數(shù)式組件的優(yōu)缺點(diǎn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
函數(shù)式組件特點(diǎn)：
- 沒有管理任何狀態(tài)
- 沒有監(jiān)聽任何傳遞給它的狀態(tài)
- 沒有生命周期方法
- 它只是接收一些prop的函
我們將這樣的組件標(biāo)記為functional：
- 無狀態(tài) == 無響應(yīng)式數(shù)據(jù)
- 無實(shí)例 == 無this上下文
函數(shù)式組件的優(yōu)點(diǎn)：
渲染開銷低，因?yàn)楹瘮?shù)式組件只是函數(shù)；
函數(shù)式組件基本寫法：
{
functional: true,
// Props 是可選的
props: {
// ...
},
// 為了彌補(bǔ)缺少的實(shí)例
// 提供第二個參數(shù)作為上下文
render: function (createElement, context) {
// ...
}
}
下面在通過代碼給大家詳細(xì)介紹vue函數(shù)式組件，具體代碼如下所示；
{
functional: true,
// Props 是可選的
props: {
// ...
},
// 為了彌補(bǔ)缺少的實(shí)例
// 提供第二個參數(shù)作為上下文
render: function (createElement, context) {
// ...
}
}
組件需要的一切都是通過 context 參數(shù)傳遞，它是一個包含如下字段的對象：
- props: 提供所有prop的對象
- children:VNode 子節(jié)點(diǎn)的數(shù)組
- slots: 一個函數(shù)，返回了包含所有插槽的對象
- scoptedSlots:(2.6.0) 一個暴露傳入的作用域插槽的對象，也以函數(shù)形式暴露普通插槽
- data:傳遞個組件的整個 數(shù)據(jù)對象 ，作為createElement的第二個參數(shù)傳入組件
- parent:對父組件的引用
- listeners:(2.3.0+) 一個包含了：所有父組件為當(dāng)前組件祖冊的事件監(jiān)聽器對象，是data.on的一個別名
- injections:(2.3.0+) 如果使用了inject選項(xiàng)，則改對象包含了：應(yīng)當(dāng)被注入的屬性；
總結(jié)
以上所述是小編給大家介紹的Vue函數(shù)式組件你值得擁有,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了如何解決Element UI中NavMenu折疊菜單的坑,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)據(jù)響應(yīng)系統(tǒng)的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
elementui實(shí)現(xiàn)表格自定義排序的示例代碼
本文主要介紹了elementui實(shí)現(xiàn)表格自定義排序的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))
這篇文章主要介紹了mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue.js項(xiàng)目使用原生js實(shí)現(xiàn)移動端的輪播圖
這篇文章主要為大家介紹了vue.js項(xiàng)目中使用原生js實(shí)現(xiàn)移動端的輪播圖，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
這篇文章主要介紹了Vue3中插槽(slot)用法匯總,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
基于element-ui中el-select下拉框選項(xiàng)過多的優(yōu)化方案
這篇文章主要介紹了基于element-ui中el-select下拉框選項(xiàng)過多的優(yōu)化方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解Vue.js使用Swiper.js在iOS<11時出現(xiàn)錯誤
這篇文章主要介紹了詳解Vue.js使用Swiper.js在iOS<11時出現(xiàn)錯誤，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue 虛擬列表的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-03-03