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 這種是默認(rèn)寫法 子組件傳入的值是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 默認(rèn)值就是 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-10vue-resourse將json數(shù)據(jù)輸出實例
這篇文章主要為大家詳細(xì)介紹了vue-resourse將json數(shù)據(jù)輸出實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03vue3中關(guān)于路由hash與History的設(shè)置
這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04