首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue子路由调用父路由

vue实现子路由调用父路由的方法

2024-06-12 17:28:27 作者：danger_man

这篇文章主要介绍了vue实现子路由调用父路由的方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue子路由调用父路由

父路由页面

<template>
  <div style="height: 100%">
  	 <!-- 路由占位符 -->
     <router-view @update="getRightList()" />
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
  	return {
  	}
  },
  methods: {
    // 获取权限数据
    getRightList(data) {
      console.log("45465456");
    },
  },
}
<script>

子路由页面

let _that = this;
_that.$emit("update");

vue子路由调用父路由中的方法和参数

实现方式

直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。

使用this.$parent.xx()即可调用对应父亲路由的方法

测试代码

父页面：

<template>
  <div class="parent-demo">
    <div>这是父页面</div>
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      parentParam: '父页面数据'
    }
  },
  methods: {
    // 初始化
    init (msg) {
      alert('这是父页面，传入的参数是："' + msg + '"')
    }
  }
}
</script>

子页面：

<template>
  <div class="children-demo">
    <div>这是子页面</div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始化
    init () {
      this.$parent.init('在子页面中调用父页面的数据和方法，' + this.$parent.parentParam);
    }
  }
}
</script>

测试结果

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。