vue3中組件傳值的多種方法總結
更新時間：2023年01月06日 09:45:21 作者：魚丸粗面(●'?'●)o(*￣▽￣*)o
學習過vue2的寶子們肯定知道,組件傳值是vue項目開發(fā)過程中必不可少的功能場景,下面這篇文章主要給大家介紹了關于vue3中組件傳值的多種方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
第一種: props和 emit
父組件里面子組件標簽
子組件接收,props setup函數(shù)接收參數(shù),使用ref來轉化為響應式數(shù)據(jù) 使用emit來觸發(fā)父組件事件,攜帶參數(shù)
setup語法實現(xiàn)父向子傳值
父組件里面子組件 標簽內部還是 一樣,不一樣都是 子組件內部引入 defineProps ( { 值 })
就是props的值
第三種: provide和inject 實現(xiàn)后代組件傳值
父組件內部使用> provide ( "變量名" ,值 ) 這個值要包在setup函數(shù)內部 同時引入provide這個方法
子組件內部,引入inject 方法 const m=inject(' 變量名')
第四種: v-model 以及動態(tài)屬性綁定
v-model 這種是默認寫法 子組件傳入的值是value vue2中 但是有時候value可能重名 就需要動態(tài)綁定數(shù)據(jù)
在父組件的子組件標簽內部 ,: 屬性名=“父組件的屬性名”
如果是 v-model 可以再 model里面修改名字
如果是 動態(tài)綁定數(shù)據(jù) 就需要 props來接收
可以再子組件修改 父組件父數(shù)據(jù) 因為數(shù)據(jù)是動態(tài)的 固定寫法
在vue3中 v-model 默認值就是 modelValue
總結
到此這篇關于vue3中組件傳值的多種方法的文章就介紹到這了,更多相關vue3組件傳值方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
關于Vue中echarts響應式頁面變化resize()的用法介紹
Vue項目中開發(fā)數(shù)據(jù)大屏，使用echarts圖表根據(jù)不同尺寸的屏幕進行適配，resize()可以調用echarts中內置的resize函數(shù)進行自適應縮放，本文將給大家詳細介紹resize()的用法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue.js如何使用Socket.IO的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了為什么推薦使用JSX開發(fā)Vue3，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue-resource實現(xiàn)ajax請求和跨域請求示例
本篇文章主要介紹了Vue-resource實現(xiàn)ajax請求和跨域請求示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細介紹了如何通過Vue實現(xiàn)交錯過渡動畫效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
這篇文章主要介紹了Vue.js 響應接口的相關資料，文中實例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了vue訪問未定義的路由時重定向404問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
watch?的本質就是觀測一個響應式數(shù)據(jù)，當數(shù)據(jù)發(fā)生變化時通知并執(zhí)行相應的回調函數(shù)。watch的實現(xiàn)利用了effect?和?options.scheduler?選項，這篇文章主要介紹了Vue3源碼分析偵聽器watch的實現(xiàn)原理,需要的朋友可以參考下2022-08-08
vue-cli2.x項目優(yōu)化之引入本地靜態(tài)庫文件的方法
這篇文章主要介紹了vue-cli2.x項目優(yōu)化之引入本地靜態(tài)庫文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
最近小編接了一個新項目，項目需求要實現(xiàn)一個聊天功能，今天小編通過實例代碼給大家介紹vue cli使用融云實現(xiàn)聊天功能的方法，感興趣的朋友跟隨小編一起看看吧2019-04-04