vue3 父组件 调用子组件方法

在Vue3中，父组件可以通过ref或者$refs来获取子组件的实例，并调用子组件的方法。下面是一个简单的示例：

首先，在父组件中，需要使用ref来引用子组件：

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

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);

    const callChildMethod = () => {
      childRef.value.childMethod();
    };

    return {
      childRef,
      callChildMethod
    };
  }
};
</script>

然后，在子组件中，需要使用`emits`选项来声明可以被父组件调用的方法：

<template>
  <div>
    子组件内容
  </div>
</template>

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

export default {
  emits: ['childMethod'],
  methods: {
    childMethod() {
      // 子组件方法的逻辑
      console.log('子组件方法被调用');
    }
  }
};
</script>

在上述示例中，父组件通过ref引用了子组件，并在点击按钮时调用了子组件的`childMethod`方法。当点击按钮时，控制台会输出"子组件方法被调用"。