当前位置：首页 > news >正文

父组件调用子组件方法（组合式 API版）

news 来源：原创 2024/7/5 19:49:07

在 Vue 3 中，defineExpose 是一个用于在组合式 API (Composition API) 中暴露组件内部方法或属性的函数。它允许父组件通过 ref 引用子组件实例，并调用子组件暴露的方法或访问其属性。

以下是子组件和父组件如何使用 defineExpose 和 ref 的详细解释和示例。

子组件

子组件通过 defineExpose 来暴露方法，使父组件能够调用这些方法。

<!-- 子组件 SelectCase.vue -->
<template><a-modal v-model:visible="caseIsVisable"><!-- 模态框内容 --></a-modal>
</template><script setup>
import { ref } from 'vue';const caseIsVisable = ref(false);// 新增，打开模态框
const openModal = () => {caseIsVisable.value = true;
};// 取消，关闭模态框
const handleCancel = () => {caseIsVisable.value = false;
};// 暴露方法给父组件
defineExpose({openModal,handleCancel,
});
</script>

父组件

父组件通过 ref 引用子组件实例，并可以调用子组件暴露的方法。

<!-- 父组件 ParentComponent.vue -->
<template><SelectCase ref="selectCaseRef" :graphInfo="graphInfo" /><button @click="openChildModal">Open Modal in Child</button>
</template><script setup>
import { ref } from 'vue';
import SelectCase from './SelectCase.vue';const graphInfo = ref({}); // 示例数据// 引用子组件实例
const selectCaseRef = ref(null);// 调用子组件方法
const openChildModal = () => {selectCaseRef.value.openModal();
};
</script>

原理解释

子组件中的 defineExpose:
- defineExpose 用于将子组件的某些方法或属性暴露给父组件。在这个例子中，openModal 和 handleCancel 方法通过 defineExpose 暴露。
- 这样做的目的是让父组件能够调用这些方法来控制子组件的行为，比如打开或关闭模态框。
父组件中的 ref:
- 在父组件中，通过 ref 引用子组件的实例。使用 ref 可以在父组件中直接访问子组件的方法和属性。
- 例如，const selectCaseRef = ref(null); 创建一个引用来存储子组件实例。
- 在模板中，通过 ref="selectCaseRef" 将子组件实例赋值给 selectCaseRef。
调用子组件的方法:
- 一旦子组件实例被引用到 selectCaseRef，父组件就可以通过 selectCaseRef.value 访问子组件的暴露方法。
- selectCaseRef.value.openModal(); 调用子组件的 openModal 方法，从而在子组件中打开模态框。