彻底搞清楚vue3的defineExpose宏函数是如何暴露方法给父组件使用

发布网友发布时间：2024-09-10 01:22

共1个回答

热心网友时间：2024-09-10 03:36

在Vue 3中，理解defineExpose宏函数如何将子组件的方法暴露给父组件至关重要。定义为setup函数后，子组件的默认行为是隐藏其内部属性和方法，以便遵循组件的封装性。为了实现父组件访问，你需要明确地使用defineExpose来指定哪些部分需要暴露。

首先，看一个实例。在父组件index.vue中，通过ref获取子组件实例并尝试调用其validate方法：

调用子组件方法

如果子组件child.vue不使用defineExpose，尝试访问validate方法将返回undefined，因为setup内定义的不会暴露。然而，当添加defineExpose如下：

此时，父组件可以正常访问validate方法。在浏览器中查看编译后的代码，定义Expose的逻辑会被添加到_sfc_main对象的setup映射中，如图所示：

为了调试，确保关闭浏览器的JavaScript source map，以便查看编译后的代码细节。通过这种方式，你就能清晰地理解defineExpose宏函数是如何使方法在Vue 3的组件间交互的。