Vue中子路由怎么调用父路由中的方法和参数

一、实现方式：直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。使用this.$parent.xx()即可调用对应父亲路由的方法二、测试代码：父页面：<template><div class="parent-demo"><div>这是父页面</div><router-view></router-vie

竹立荷塘

5308人浏览 · 2021-04-22 16:16:09

竹立荷塘 · 2021-04-22 16:16:09 发布

一、实现方式：

直接在子路由的范围内使用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>