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

在Vue 3的开发中，经常会遇到需要在父组件中调用子组件方法的情况。下面将介绍几种常见的实现方式。

1. 通过ref引用调用

在Vue 3中，可以使用 ref 来获取子组件的实例，然后通过该实例调用子组件的方法。在父组件中给子组件添加 ref 属性：

<template>
  <ChildComponent ref="childRef"></ChildComponent>
  <button @click="callChildMethod">调用子组件方法</button>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const childRef = ref(null);
const callChildMethod = () => {
  childRef.value.childMethod();
};
</script>

在子组件中定义 childMethod 方法：

<template>
  <div>子组件内容</div>
</template>
<script setup>
const childMethod = () => {
  console.log('子组件方法被调用');
};
</script>

2. 使用自定义事件

子组件可以通过 emit 派发自定义事件，父组件监听该事件并在需要的时候触发子组件的方法。子组件代码如下：

<template>
  <div>子组件内容</div>
</template>
<script setup>
import { ref } from 'vue';
const emit = defineEmits(['callChildMethod']);
const childMethod = () => {
  console.log('子组件方法被调用');
};
emit('callChildMethod', childMethod);
</script>

父组件代码：

<template>
  <ChildComponent @callChildMethod="handleCallChildMethod"></ChildComponent>
  <button @click="callChildMethod">调用子组件方法</button>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
let childMethod;
const handleCallChildMethod = (method) => {
  childMethod = method;
};
const callChildMethod = () => {
  childMethod();
};
</script>

3. 使用provide和inject

provide 和 inject 可以实现祖先组件向后代组件传递数据或方法。这种方式适用于组件嵌套层次较深的情况。具体实现可以根据实际需求进行编写。

Vue 3提供了多种调用子组件方法的方式，开发者可以根据具体的项目需求和场景选择合适的方法来实现。