vue调用父组件方法

<template>
  <div>
    <!-- 子组件通过自定义事件调用父组件方法 -->
    <child-component @custom-event="parentMethod"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    // 父组件的方法
    parentMethod() {
      console.log('父组件的方法被调用了');
    }
  }
};
</script>

解释说明：

1. 父组件：在父组件中，我们通过 @custom-event 监听子组件触发的自定义事件，并将其绑定到父组件的 parentMethod 方法上。
2. 子组件：在子组件中，当需要调用父组件的方法时，可以通过 $emit 触发一个自定义事件（例如 custom-event），并传递参数给父组件。

如果子组件代码如下：

<template>
  <button @click="callParentMethod">点击我调用父组件方法</button>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$emit('custom-event'); // 触发自定义事件
    }
  }
};
</script>

当用户点击按钮时，子组件会触发 custom-event 事件，父组件监听到该事件后会调用 parentMethod 方法。