在 Vue 3 中，父组件调用子组件的方法时，子组件 必须暴露方法，否则父组件无法直接访问子组件的内部方法。
Vue 3 的设计原则是强调组件的封装性和可维护性。子组件的方法默认是私有的，只有通过明确暴露（expose 或 defineExpose）才能被父组件访问。这种设计有助于避免直接访问子组件内部实现的潜在问题，比如破坏封装性或导致难以维护的代码。
在 Vue 3 中，可以通过以下方式暴露子组件的方法：
在 Composition API 中，使用 defineExpose 来暴露方法：
<script setup> import { ref } from 'vue' const count = ref(0) function increment() { count.value++ } // 暴露方法 defineExpose({ increment }) </script>
在 Options API 中，使用 expose 选项来暴露方法：
export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, expose: ['increment'] // 暴露方法 }
父组件可以通过 ref 或 provide/inject 来调用子组件暴露的方法。
ref<template> <div> <ChildComponent ref="childRef" /> <button @click="callChildMethod">调用子组件方法</button> </div> </template> <script setup> import { ref } from 'vue' import ChildComponent from './ChildComponent.vue' const childRef = ref(null) function callChildMethod() { childRef.value.increment() // 调用子组件暴露的方法 } </script>
子组件必须通过 defineExpose（Composition API）或 expose（Options API）来暴露方法。
父组件通过 ref 或其他机制访问子组件暴露的方法。
这种设计有助于保持组件的封装性和代码的可维护性。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。