在Vue 3中，父组件可以通过几种方式调用子组件的方法。以下是一个简单的例子：
- 使用
ref引用子组件实例，然后在父组件中调用子组件的方法。
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<button @click="childMethod">Click me</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
console.log('Child method called');
},
},
};
</script>
<!-- 父组件 ParentComponent.vue -->
<template>
<div>
<ChildComponent ref="childRef" />
<button @click="callChildMethod">Call Child Method</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
callChildMethod() {
this.$refs.childRef.childMethod();
},
},
};
</script>- 使用
provide和inject实现跨层级的方法调用。
子组件：
<script setup>
const childMethod = () => {
console.log('Child method called');
};
defineExpose({ childMethod });
</script>父组件：
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const childRef = ref(null);
const callChildMethod = () => {
childRef.value.childMethod();
};
</script>
<template>
<ChildComponent ref="childRef" />
<button @click="callChildMethod">Call Child Method</button>
</template>在这个例子中，子组件通过 defineExpose 暴露了它的方法，父组件通过 ref 引用子组件，并通过 childRef.value.childMethod() 调用子组件的方法。