vue3子调用父组件方法

在Vue 3中，您可以通过以下步骤子组件中调用父组件的方法：

1. 在父组件中，使用`ref`创建一个指向子组件的引用。

2. 在子组件中，使用`emit`方法触发父组件中的自定义事件，并将需要传递的参数作为参数传递。

以下是一个简单的示例代码：

父组件：

<template>
  <div>
    <ChildComponent :childRef="childRef"/>
    <button @click="parentMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);
    const parentMethod = () => {
      childRef.value.childMethod();
    }

    return {
      childRef,
      parentMethod
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="childMethod">子组件方法</button>
  </div>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: ['custom-event'],
  setup(props, { emit }) {
    const childMethod = () => {
      emit('custom-event', '参数');
    }

    defineEmits(['custom-event']);

    return {
      childMethod
    }
  }
}
</script>

在上面的示例中，父组件通过`ref`创建了一个指向子组件的引用`childRef`，并在子组件中将其作为属性传递。然后，父组件定义了一个名为`parentMethod`的方法，该方法通过`childRef.value.childMethod()`调用子组件的`childMethod`方法。在子组件中，定义了一个名为`childMethod`的方法，并通过`emit`触发了一个名为`custom-event`的自定义事件，并将需要传递的参数作为参数传递。最后，在子组件中使用`defineEmits`定义了`custom-event`事件。