vue實現(xiàn)子路由調(diào)用父路由的方法
更新時間：2024年06月12日 17:28:27 作者：danger_man
這篇文章主要介紹了vue實現(xiàn)子路由調(diào)用父路由的方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue子路由調(diào)用父路由
父路由頁面
<template>
<div style="height: 100%">
<!-- 路由占位符 -->
<router-view @update="getRightList()" />
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
}
},
methods: {
// 獲取權(quán)限數(shù)據(jù)
getRightList(data) {
console.log("45465456");
},
},
}
<script>
子路由頁面
let _that = this;
_that.$emit("update");
vue子路由調(diào)用父路由中的方法和參數(shù)
實現(xiàn)方式
直接在子路由的范圍內(nèi)使用this.$parent.xx即可調(diào)用對應(yīng)父親路由的參數(shù)。
使用this.$parent.xx()即可調(diào)用對應(yīng)父親路由的方法
測試代碼
- 父頁面：
<template>
<div class="parent-demo">
<div>這是父頁面</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
parentParam: '父頁面數(shù)據(jù)'
}
},
methods: {
// 初始化
init (msg) {
alert('這是父頁面，傳入的參數(shù)是："' + msg + '"')
}
}
}
</script>- 子頁面：
<template>
<div class="children-demo">
<div>這是子頁面</div>
</div>
</template>
<script>
export default {
data () {
return {}
},
mounted () {
this.init()
},
methods: {
// 初始化
init () {
this.$parent.init('在子頁面中調(diào)用父頁面的數(shù)據(jù)和方法，' + this.$parent.parentParam);
}
}
}
</script>測試結(jié)果
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了用vuex寫了一個購物車H5頁面的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
本篇文章主要介紹了詳解vuejs幾種不同組件（頁面）間傳值的方式，具有一定的參考價值，有興趣的可以了解一下2017-06-06
vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)
這篇文章主要介紹了vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
本文主要介紹了vue虛擬滾動/虛擬列表簡單實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
這篇文章主要介紹了vue下的@change事件的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue組件開發(fā)props驗證的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
在現(xiàn)代Web開發(fā)中,Vue.js成為前端開發(fā)者構(gòu)建單頁應(yīng)用的熱門框架,Nginx以其高性能和穩(wěn)定性,成為部署Vue項目的理想選擇,這篇文章主要介紹了Nginx部署前端Vue項目的步驟、常見問題與解決方案,需要的朋友可以參考下2024-09-09
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue 被設(shè)計為可以自底向上逐層應(yīng)用,本文給大家介紹Vue 概述及基本使用,感興趣的朋友跟隨小編一起看看吧2025-10-10
element-ui+vue-treeselect下拉框的校驗過程
這篇文章主要介紹了element-ui+vue-treeselect下拉框的校驗過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07