vue中的router-view父子組件傳參方式
一、父組件傳值給子組件
父組件傳遞
<router-view :projectId="projectId"></router-view>
在data里存儲的參數(shù)
data(){ return { projectId:'xxxxxxxx' } }
子組件接收
export default { props:['projectId'], watch: { projectId: function (val) { console.log(val); // 接收父組件的值 } }, }
二、子組件往父組件傳值
子組件傳值
this.$emit('updateProjectId','xxxxxx')
父組件接收
<router-view class="systemContent" @updateProjectId="updateProjectIdParent"></router-view>
注意:
子組件發(fā)送的updateProjectId方法要與父組件綁定的updateProjectId方法同名
updateProjectIdParent(msg){ this.selectArr.push(msg) },
這樣一個簡單的router-view父子傳值就完成了,其實router-view父子組件傳值與普通的組件一樣,只是讓人迷惑,認為這是路由組件可能會有所不同。
所以碰到拿捏不定,可以大膽的去嘗試~
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue.config.js中configureWebpack與chainWebpack區(qū)別及說明
這篇文章主要介紹了vue.config.js中configureWebpack與chainWebpack區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09Vue實現(xiàn)boradcast和dispatch的示例
這篇文章主要介紹了Vue實現(xiàn)boradcast和dispatch的示例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-11-11vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01Vue和SpringBoot之間傳遞時間的方法實現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時間的方法實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號的問題及解決方法
這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號要怎么解決,項目場景我是傳遞一個string字符給后端時候報錯,隨手把這個問題記錄下來了,需要的朋友可以參考下解決方案2022-11-11