快捷導(dǎo)航

vue實(shí)現(xiàn)子路由調(diào)用父路由的方法

更新時間：2024年06月12日 17:28:27 作者：danger_man

這篇文章主要介紹了vue實(shí)現(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ù)

實(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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問題
這篇文章主要介紹了VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問題。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
element?ui設(shè)置table自適應(yīng)表格寬,不自動換行問題
這篇文章主要介紹了element?ui設(shè)置table自適應(yīng)表格寬,不自動換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
Vue3實(shí)現(xiàn)跨頁面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁面?zhèn)髦悼梢酝ㄟ^多種方式實(shí)現(xiàn),具體選擇哪種方法取決于應(yīng)用的具體需求和頁面間的關(guān)系,本文列舉了幾種常見的跨頁面?zhèn)髦捣椒?感興趣的同學(xué)跟著小編來看看吧
2024-04-04
Vue和SpringBoot之間傳遞時間的方法實(shí)現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時間的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue組件間通信子與父詳解（二）
這篇文章主要為大家詳細(xì)介紹了vue組件間通信子與父的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼
這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫多邊形范圍,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-07-07
vue3中element-plus?Upload上傳文件代碼示例
這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關(guān)資料,在時間開發(fā)中上傳文件是經(jīng)常遇到的一個需求,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
使用Vue自定義數(shù)字鍵盤組件(體驗(yàn)度極好)
最近做 Vue 開發(fā)，因?yàn)橛胁簧夙撁嫔婕暗浇痤~輸入，產(chǎn)品老是覺得用原生的 input 進(jìn)行金額輸入的話體驗(yàn)很不好，于是自己動手寫了一個使用Vue自定義數(shù)字鍵盤組件，具體實(shí)現(xiàn)代碼大家參考下本文
2017-12-12
vue路由警告:Duplicate named routes definition問題
這篇文章主要介紹了vue路由警告:Duplicate named routes definition問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue之data定義的三種方式及區(qū)別說明
這篇文章主要介紹了Vue之data定義的三種方式及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03