vue-子组件this.$parent.方法调用父组件报错（this.$parent.closeOverlay is not a function）

原创已于 2026-01-07 10:06:14 修改 · 603 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #vue.js #前端

于 2024-08-27 15:49:12 首次发布

Vue.js 专栏收录该内容

30 篇文章

订阅专栏

1.this.$parent子组件调用父组件方法

在Vue.js中，this.$parent 是一个实例属性，子组件通过 this.$parent 访问父组件的数据、方法以及计算属性等。

父组件

<template>  
  <div>  
    <h1>Parent Component</h1>  
    <child-component></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    parentMethod() {  
      console.log('Parent method called');  
    }  
  }  
}  
</script>

子组件

<template>  
  <div>  
    <button @click="callParentMethod">Call Parent Method</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    callParentMethod() {  
      // 使用 this.$parent 访问父组件并调用方法  
      if (this.$parent && typeof this.$parent.parentMethod === 'function') {  
        this.$parent.parentMethod();  
      }  
    }  
  }  
}  
</script>

上面是正确使用this.$parent子组件调用父组件方法。

2.报错信息

this.$parent.closeOverlay is not a function

父组件中没有定义 closeOverlay 方法：

确保你的父组件中确实定义了一个名为 closeOverlay 的方法。检查父组件的 <script> 部分，看看是否有一个名为 closeOverlay 的方法。
组件关系错误：

this.$parent 指向的是当前组件的直接父组件。如果 closeOverlay 方法并不在当前组件的直接父组件上，那么 this.$parent.closeOverlay 将不会是一个函数。检查组件树，确保调用 closeOverlay 的地方确实是在包含该方法的父组件的子组件中。
方法名或大小写错误：

JavaScript 是大小写敏感的。确保 closeOverlay 的大小写在父组件和子组件中完全一致。
组件尚未挂载或更新：

如果 closeOverlay 方法是在父组件的某个生命周期钩子（如 mounted 或 updated）中定义的，并且子组件在这些钩子之前尝试调用它，那么它可能还不存在。在某些动态组件或异步加载的场景中可能会发生。

根据查询页面结构信息发现是由于this.$parent 指向的是不是当前组件的直接父组件，造成报错。

3.使用 this.$parent注意

耦合性：使用 this.$parent 会增加父子组件之间的耦合性，使得组件的复用和维护变得更加困难。
测试难度：在单元测试中，直接依赖 this.$parent 的组件可能会更难测试，因为你需要模拟父组件的上下文。

4.解决方法（$emit来触发事件）

在Vue.js中，$emit用于子组件向父组件通信，即子组件通过触发一个事件，并可能传递一些数据给父组件，父组件监听事件并作出响应。

父组件监听事件

<template>  
  <div>  
    <child-component @notify="handleNotify"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    handleNotify(message) {  
      console.log(message); // 输出: Hello from child!  
    }  
  }  
}  
</script>

子组件触发事件

<template>  
  <button @click="notifyParent">Notify Parent</button>  
</template>  
  
<script>  
export default {  
  methods: {  
    notifyParent() {  
      // 触发名为'notify'的自定义事件，并传递一些数据  
      this.$emit('notify', 'Hello from child!');  
    }  
  }  
}  
</script>