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

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

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

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

3. 方法名或大小写错误：
   JavaScript 是大小写敏感的。确保 closeOverlay 的大小写在父组件和子组件中完全一致。

4. 组件尚未挂载或更新：
   如果 closeOverlay 方法是在父组件的某个生命周期钩子（如 mounted 或 updated）中定义的，并且子组件在这些钩子之前尝试调用它，那么它可能还不存在。虽然这种情况不太常见，但在某些动态组件或异步加载的场景中可能会发生。

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

3.使用 this.$parent注意

1. 耦合性：使用 this.$parent 会增加父子组件之间的耦合性，使得组件的复用和维护变得更加困难。
2. 测试难度：在单元测试中，直接依赖 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>