vue3项目中父组件点击后调子组件里的方法

在Vue 3项目中，如果你想在父组件通过点击事件触发子组件的方法，可以使用`v-on`指令配合`:ref`属性来实现。首先，在父组件中定义一个方法，例如：

<template>
  <div>
    <button @click="callChildMethod">点击调用子组件方法</button>
    <child-component :ref="childRef" />
  </div>
</template>

<script setup>
import ChildComponent from '@/components/ChildComponent.vue';

const childRef = ref(null); // 创建一个ref引用子组件

async function callChildMethod() {
  if (childRef.value) { // 确保子组件实例存在
    await childRef.value.someMethod(); // 调用子组件中的someMethod方法
  }
}
</script>

然后，在子组件`ChildComponent.vue`里定义你想在外部调用的方法：

<template>
  <div>我是子组件</div>
</template>

<script>
export default {
  methods: {
    someMethod() {
      console.log('子组件方法被调用了');
    },
  },
};
</script>

在这个例子中，当用户点击父组件的按钮时，会调用`callChildMethod`方法，如果子组件已经挂载并存在，它就会调用子组件的`somemethod`方法。