Vue函數(shù)式組件-你值得擁有
更新時間：2019年05月09日 09:14:33 作者：GeekQiaQia
這篇文章主要介紹了Vue函數(shù)式組件及vue函數(shù)式組件的優(yōu)缺點，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
函數(shù)式組件特點：
- 沒有管理任何狀態(tài)
- 沒有監(jiān)聽任何傳遞給它的狀態(tài)
- 沒有生命周期方法
- 它只是接收一些prop的函
我們將這樣的組件標(biāo)記為functional：
- 無狀態(tài) == 無響應(yīng)式數(shù)據(jù)
- 無實例 == 無this上下文
函數(shù)式組件的優(yōu)點：
渲染開銷低，因為函數(shù)式組件只是函數(shù)；
函數(shù)式組件基本寫法：
{
functional: true,
// Props 是可選的
props: {
// ...
},
// 為了彌補缺少的實例
// 提供第二個參數(shù)作為上下文
render: function (createElement, context) {
// ...
}
}
下面在通過代碼給大家詳細介紹vue函數(shù)式組件，具體代碼如下所示；
{
functional: true,
// Props 是可選的
props: {
// ...
},
// 為了彌補缺少的實例
// 提供第二個參數(shù)作為上下文
render: function (createElement, context) {
// ...
}
}
組件需要的一切都是通過 context 參數(shù)傳遞，它是一個包含如下字段的對象：
- props: 提供所有prop的對象
- children:VNode 子節(jié)點的數(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選項，則改對象包含了：應(yīng)當(dāng)被注入的屬性；
總結(jié)
以上所述是小編給大家介紹的Vue函數(shù)式組件你值得擁有,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了在vue項目中配置你自己的啟動命令和打包命令方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vue初用antd 用v-model來雙向綁定Form表單問題
這篇文章主要介紹了使用vue初用antd 用v-model來雙向綁定Form表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3初探之ref、reactive以及改變數(shù)組的值
在setup函數(shù)中,可以使用ref函數(shù)和reactive函數(shù)來創(chuàng)建響應(yīng)式數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue3初探之ref、reactive以及改變數(shù)組值的相關(guān)資料,需要的朋友可以參考下2022-09-09
Element UI是一套基于Vue的桌面端組件庫,封裝好了很多常用的UI組件,下面這篇文章主要給大家介紹了關(guān)于element如何初始化組件功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
Google 給 Chrome 瀏覽器加了一個有趣的彩蛋，本文就詳細的介紹一下Vue實現(xiàn)Chrome小恐龍游戲的示例代碼，具有一定的參考價值，感興趣的可以了解一下2022-04-04
vue css 引入asstes中的圖片無法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片 無法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了Vue 實現(xiàn)雙向綁定的四種方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧，希望能夠給你帶來幫助2021-11-11
vite+vue3+element-plus項目搭建的方法步驟
因為vue3出了一段時間了，element也出了基于vue3.x版本的element-plus，vite打包聽說很快，嘗試一下，感興趣的可以了解一下2021-06-06
vue?路由跳轉(zhuǎn)打開新窗口被瀏覽器攔截問題處理
這篇文章主要介紹了vue?路由跳轉(zhuǎn)打開新窗口被瀏覽器攔截問題處理，下面文章操作中所遇到相關(guān)問題解決的內(nèi)容介紹詳細，需要的小伙伴可以參考一下2022-03-03
這篇文章主要介紹了Vue js如何用split切分并去掉空值和item的空格，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06