vue3子组件调用父组件中的方法

在Vue 3中，你可以通过使用`$emit`方法来在子组件中调用父组件中的方法。

首先，在父组件中定义一个方法，然后通过`v-on`指令将该方法绑定到子组件上。例如，在父组件中定义一个名为`handleClick`的方法：

<template>
  <div>
    <ChildComponent v-on:child-click="handleClick" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      // 在这里定义要执行的逻辑
      console.log('父组件中的方法被调用');
    }
  }
}
</script>

然后，在子组件中，通过`$emit`方法触发父组件中绑定的方法。例如，在子组件中定义一个按钮，并在点击事件中调用`$emit('child-click')`：

<template>
  <div>
    <button @click="handleClick">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-click');
    }
  }
}
</script>

当点击子组件中的按钮时，会触发父组件中绑定的方法，并执行相应的逻辑。在这个例子中，当点击子组件按钮时，会在控制台输出"父组件中的方法被调用"。

这就是在Vue 3中子组件调用父组件中方法的方法。希望对你有所帮助！