Vue3调用组件的方法
在Vue3项目中，我们常常需要从父组件调用子组件的方法或者反过来。解决这个问题的方案主要是通过Vue提供的内置机制，如ref、provide/inject和事件系统等。
1. 使用 ref 调用子组件方法
这是最常见也是最直接的方式。在子组件中定义一个方法：
vue
// ChildComponent.vue
<div>
<p>This is child component</p>
</div>
</p>
import { defineExpose } from 'vue'
function sayHello() {
console.log('Hello from child!')
}
defineExpose({
sayHello
})
<p>然后在父组件中使用ref引用子组件，并调用其方法：
vue
// ParentComponent.vue
<button>Call Child Method</button>
</p>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const childRef = ref(null)
function callChildMethod() {
if (childRef.value) {
childRef.value.sayHello()
}
}
<p>
2. 使用 provide/inject 传递方法
当有多个层级嵌套时，provide/inject会更加方便：
vue
// GrandParentComponent.vue</p>
import { provide } from 'vue'
function sharedMethod() {
console.log('Shared method called')
}
provide('sharedMethod', sharedMethod)
<p>在后代组件中可以注入并使用这个方法：
vue
// SomeChildComponent.vue</p>
import { inject } from 'vue'
const sharedMethod = inject('sharedMethod')
// 现在可以调用 sharedMethod()
<p>
3. 使用事件系统
对于简单的父子组件通信，也可以使用事件：
vue
// ChildComponent.vue
<template>
<div>
<button @click="$emit('custom-event')">Emit Event</button>
</div>
</template>
父组件监听事件：
vue
// ParentComponent.vue
</p>
function handleEvent() {
console.log('Event received from child')
}
<p>这三种方式各有优缺点：
- ref适合直接操作子组件
- provide/inject适合跨多层组件通信
- 事件系统则更适合子向上传递信息
选择哪种方式取决于具体的业务场景和组件结构。实际开发中可以根据需求灵活组合使用这些方法。
