Vue的route-view子页面调用父页面的函数详解

当我们在使用Vue的路由时，有些情况下我们需要在子页面中调用父页面中的函数，这种需求是非常常见的。本文将讲解如何在Vue中通过 this.$parent 和 $refs 这两种方法来实现子页面调用父页面函数的详解。

方法一：this.$parent

this.$parent 可以获取到当前实例的父级，因此可以通过该属性来调用父级中的方法。

示例1：父子页面共用一个参数

假设我们有一个父页面 Foo，其中有一个方法 handleFoo，父页面中有一个 router-view，其子页面是 Bar，Bar 中需要使用 handleFoo 方法。

1. 在父页面中定义 handleFoo 方法

<template>
  <div>
     <router-view />
  </div>
</template>

<script>
export default {
  data(){
    return{
      foo: 'bar'
    }
  },
  methods:{
    handleFoo(){
      console.log(this.foo)
    }
  }
}
</script>

1. 在子页面中通过 $parent 获取父元素并调用方法

<template>
  <button @click="$parent.handleFoo">点击</button>
</template>

示例2：父子页面不共用参数

假设现在父页面中有一个 handleParent 方法，需要使用 this.$router.push() 来跳转页面，子页面中需要调用该方法。

1. 在父页面中定义 handleParent 方法

<template>
  <div>
     <router-view />
  </div>
</template>

<script>
export default {
  methods:{
    handleParent(){
      this.$router.push('/')
    }
  }
}
</script>

1. 在子页面中通过 $parent 获取父元素并调用方法

<template>
  <button @click="$parent.handleParent">跳转到首页</button>
</template>

方法二：$refs

$refs 可以获取到 Vue 实例子组件的 DOM 节点或者获取到子组件中的属性或方法。

示例：通过 $refs 获取父元素实例并调用方法

假设我们有一个父页面 Foo，其中有一个方法 handleFoo，父页面中有一个 router-view，其子页面是 Bar，Bar 中需要使用 handleFoo 方法。

1. 在父页面中定义 handleFoo 方法

<template>
  <div>
     <router-view />
  </div>
</template>

<script>
export default {
  data(){
    return{
      foo: 'bar'
    }
  },
  methods:{
    handleFoo(){
      console.log(this.foo)
    }
  }
}
</script>

1. 在子页面中获取父元素的实例并调用方法

<template>
  <button @click="handleParent">点击</button>
</template>

<script>
export default {
    methods:{
        handleParent() {
            this.$parent.$refs.Foo.handleFoo()
        }
    }
}
</script>

在上述代码中，this.$parent.$refs.Foo 中的 Foo 是指父页面中的组件名，即 <Foo ref="Foo"></Foo>。通过使用 $parent 和 $refs，我们可以轻松获取父元素的实例并调用其方法。

至此为止，就讲完了 Vue 的 route-view 子页面调用父页面的函数的攻略，希望能对你有所帮助。