vue怎么调用父组件的方法

在Vue.js中，为了在子组件调用父组件的方法，你需要通过`props`传递事件或者使用`$emit`来触发自定义事件，然后在父组件内部监听这个事件并处理。

**1. 使用props传递方法（不推荐）：**
如果父组件想要共享一个全局方法给所有子组件，可以直接将方法作为prop传入：

<!-- 父组件 -->
<template>
  <div>
    <child-component :parentMethod="myGlobalMethod" />
  </div>
</template>

<script>
export default {
  methods: {
    myGlobalMethod() {
      console.log("This is a global method");
    }
  }
};
</script>

然后在子组件里直接调用：

<!-- 子组件 -->
<template>
  <button @click="callParentMethod">Call Parent Method</button>
</template>

<script>
import { parentComponent } from './Parent.vue'; //假设已经引入父组件

export default {
  methods: {
    callParentMethod() {
      this.$parent.myGlobalMethod();
    }
  },
  components: {
    parentComponent
  }
};
</script>

**2. 使用自定义事件（推荐）：**
更常见的方式是让子组件发送一个自定义事件到父组件，并监听这个事件：

<!-- 子组件 -->
<template>
  <button @click="$emit('parent-action', 'Some data')">Trigger Parent Method</button>
</template>

<script>
export default {
  methods: {}
};
</script>

// 父组件
<template>
  <ChildComponent @parent-action="handleParentAction"></ChildComponent>
</template>

<script>
export default {
  methods: {
    handleParentAction(data) {
      console.log(`Received data from child: ${data}`);
      // 在这里处理数据
    }
  }
};
</script>