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