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 Router組件內(nèi)路由鉤子的使用,用于權(quán)限驗(yàn)證、數(shù)據(jù)預(yù)加載、防止數(shù)據(jù)丟失等場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2025-06-06
vue為什么v-for的優(yōu)先級(jí)比v-if高原理解析
這篇文章主要為大家介紹了vue為什么v-for的優(yōu)先級(jí)比v-if高原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue3中defineEmits、defineProps?不用引入便直接用
這篇文章主要介紹了Vue3中defineEmits、defineProps?不用引入便直接用，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
vue?循環(huán)動(dòng)態(tài)設(shè)置ref并獲取$refs方式
這篇文章主要介紹了vue?循環(huán)動(dòng)態(tài)設(shè)置ref并獲取$refs方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue 組件（component）教程之實(shí)現(xiàn)精美的日歷方法示例
組件是我們學(xué)習(xí)vue必須會(huì)的一部分，下面這篇文章主要給大家介紹了關(guān)于Vue 組件（component）教程之實(shí)現(xiàn)精美的日歷的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章給大家詳細(xì)分析了關(guān)于VUE的常用的相關(guān)指令內(nèi)容，對(duì)此有需要的朋友們可以學(xué)習(xí)下。2018-08-08
這篇文章主要介紹了Vue Mint UI mt-swipe的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue3組件庫框架搭建example環(huán)境的詳細(xì)教程
這篇文章主要介紹了Vue3組件庫框架搭建example環(huán)境的詳細(xì)教程,本文便搭建?example?開發(fā)環(huán)境和打包構(gòu)建，并在example中使用組件庫，需要的朋友可以參考下2022-11-11
Element-UI日期選擇器(選擇日期范圍)禁用未來日期實(shí)現(xiàn)代碼
我們?cè)诰W(wǎng)頁開發(fā)時(shí)通常需要用到一些日期組件來方便用戶選擇時(shí)間,其中element日期組件是一個(gè)非常好用的工具,這篇文章主要給大家介紹了關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來日期的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Element PageHeader頁頭的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07