vue3中父组件触发子组件的方法

在Vue3中，可以使用`ref`来获取子组件实例，并定义一个方法来触发子组件的方法。具体步骤如下：
1. 在父组件中，使用`ref`来获取子组件实例。
2. 定义一个方法来触发子组件的方法，方法内部通过`childComponentRef.value.childMethod()`来调用子组件的方法。
3. 在模板中，通过`<ChildComponent ref="childComponentRef" />`来引入子组件，并在需要触发子组件方法的地方绑定`@click="triggerChildMethod"`事件。

下面是一个示例代码：

<template>
  <div>
    <ChildComponent ref="childComponentRef" />
    <button @click="triggerChildMethod">Trigger child method</button>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  setup() {
    const childComponentRef = ref(null)

    const triggerChildMethod = () => {
      childComponentRef.value.childMethod()
    }

    return { childComponentRef, triggerChildMethod }
  }
}
</script>

另外，如果需要在子组件中触发父组件的方法，可以在子组件中定义一个自定义事件，并在父组件中通过`@事件名="方法名"`来绑定事件。具体步骤如下：
1. 在子组件中，定义一个自定义事件，例如`load`。
2. 在子组件中，在需要触发自定义事件的地方，通过`$emit('事件名', 参数)`来触发自定义事件。
3. 在父组件中，通过`<ChildComponent @load="handleLoadData" />`来引入子组件，并在父组件中定义一个`handleLoadData`方法来处理子组件传递过来的参数。

下面是一个示例代码：

// 子组件
<template>
  <div>
    ...
    <button @click="$emit('load', data)">Load data</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['data'],
  methods: {
    childMethod() {
      // 子组件方法
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <ChildComponent ref="childComponentRef" @load="handleLoadData" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  setup() {
    const childComponentRef = ref(null)

    const handleLoadData = (data) => {
      // 处理子组件传递过来的参数
    }

    return { childComponentRef, handleLoadData }
  }
}
</script>