Nuxt 组件父方法调用

简介

在 Nuxt.js 中，组件可以通过 $parent 属性来访问其父组件，并调用父组件中的方法。

用法

获取父组件

在组件中可以使用 $parent 属性获取其父组件的实例。例如，在子组件的方法中可以这样使用：

export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod()
    }
  }
}

调用父组件方法

获取到父组件实例后，我们可以调用其方法。例如，假设我们有一个父组件和一个子组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, parent component!'
    }
  },
  methods: {
    parentMethod() {
      console.log('This method is called from the parent component.')
    }
  }
}
</script>

我们可以在子组件中通过 $parent 属性获取父组件实例，然后调用其 parentMethod 方法：

<template>
  <button @click="callParentMethod">Call parent method</button>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod()
    }
  }
}
</script>

点击按钮后，控制台中将会输出 "This method is called from the parent component."。

总结

通过 $parent 属性可以在子组件中访问父组件实例，并调用其方法。这一功能在开发中经常会用到，能够有效地简化组件之间的通信。