vue中的router-view父子組件傳參方式
更新時間：2024年01月03日 10:28:06 作者：輕嘆年華逝，
這篇文章主要介紹了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-09
這篇博客針對axios庫的核心代碼做一個簡要總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue實現(xiàn)boradcast和dispatch的示例
這篇文章主要介紹了Vue實現(xiàn)boradcast和dispatch的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
路由懶加載是一項關(guān)鍵技術(shù),它可以幫助我們提高Web應(yīng)用的加載速度,本文主要介紹了React和Vue實現(xiàn)路由懶加載的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
Vue和SpringBoot之間傳遞時間的方法實現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時間的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
聊天工具的項目開發(fā)到了表情功能,由于目前會話的輸入?yún)^(qū)域使用的是 textarea 而非富文本編輯器,所以表情功能也需要兼顧 textarea 進行開發(fā),本文給大家簡單聊聊幾種表情的實現(xiàn)方,感興趣的小伙伴一起來看看吧2025-01-01
這篇文章主要介紹了vue.config.js常用配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號的問題及解決方法
這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號要怎么解決,項目場景我是傳遞一個string字符給后端時候報錯，隨手把這個問題記錄下來了，需要的朋友可以參考下解決方案2022-11-11
在 Vue 3 中,v-bind?指令用于將表達式的值綁定到 DOM 元素的屬性上,這個指令的語法與 Vue 2 相同,但有一些細微的變化和改進,這篇文章主要介紹了Vue3 v-bind 指令的基本用法,需要的朋友可以參考下2024-08-08