vue3中組件傳值的多種方法總結(jié)
第一種: props和 emit
父組件里面子組件標(biāo)簽
子組件接收,props setup函數(shù)接收參數(shù),使用ref來轉(zhuǎn)化為響應(yīng)式數(shù)據(jù) 使用emit來觸發(fā)父組件事件,攜帶參數(shù)
setup語法實現(xiàn)父向子傳值
父組件里面子組件 標(biāo)簽內(nèi)部還是 一樣,不一樣都是 子組件內(nèi)部引入 defineProps ( { 值 })
就是props的值
第三種: provide和inject 實現(xiàn)后代組件傳值
父組件內(nèi)部使用> provide ( "變量名" ,值 ) 這個值要包在setup函數(shù)內(nèi)部 同時引入provide這個方法
子組件內(nèi)部,引入inject 方法 const m=inject(' 變量名')
第四種: v-model 以及動態(tài)屬性綁定
v-model 這種是默認寫法 子組件傳入的值是value vue2中 但是有時候value可能重名 就需要動態(tài)綁定數(shù)據(jù)
在父組件的子組件標(biāo)簽內(nèi)部 ,: 屬性名=“父組件的屬性名”
如果是 v-model 可以再 model里面修改名字
如果是 動態(tài)綁定數(shù)據(jù) 就需要 props來接收
可以再子組件修改 父組件父數(shù)據(jù) 因為數(shù)據(jù)是動態(tài)的 固定寫法
在vue3中 v-model 默認值就是 modelValue
總結(jié)
到此這篇關(guān)于vue3中組件傳值的多種方法的文章就介紹到這了,更多相關(guān)vue3組件傳值方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項目出現(xiàn)ERESOLVE could not resolve問題及解決
這篇文章主要介紹了vue項目出現(xiàn)ERESOLVE could not resolve問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在網(wǎng)上搜了一下如何調(diào)用swiper實例,大部分都是通過 swiperRef = new Swiper(‘.swiper’, options) 這種方法初始化swiper,然后直接能用 swiperRef 實例,這篇文章主要介紹了swiper/vue 獲取 swiper實例方法詳解,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了vue選項卡Tabs組件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
vue-resourse將json數(shù)據(jù)輸出實例
這篇文章主要為大家詳細介紹了vue-resourse將json數(shù)據(jù)輸出實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
最近項目開發(fā)中遇到一個需求,需要實現(xiàn)寬度自動適應(yīng),所以下面這篇文章主要給大家介紹了關(guān)于Vue前端項目自適應(yīng)布局的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
在前端的崗位上經(jīng)常需要實現(xiàn)個生成個并下載的可視化圖表頁PDF文件,這篇文章主要給大家介紹了關(guān)于Vue前端如何實現(xiàn)生成PDF并下載功能的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易折疊面板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue3中關(guān)于路由hash與History的設(shè)置
這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue2.x與Vue3.x中路由鉤子的區(qū)別，分別介紹了路由鉤子的分類，路由配置守衛(wèi)鉤子以及組件內(nèi)守衛(wèi)鉤子等有需要的朋友可以借鑒參考下2021-09-09
這篇文章主要介紹了vue項目運行或打包時，頻繁內(nèi)存溢出情況的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04