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