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

Vue 3 中调用子组件方法

news 2025/7/17 5:23:18

在 Vue 3 中调用子组件方法与 Vue 2 有显著差异，这源于 Vue 3 底层架构的革新。

一、核心差异对比表

特性	Vue 2	Vue 3
组件实例获取	`this.$refs.childRef`	`childRef.value`
方法暴露方式	自动暴露所有方法	需手动使用 `defineExpose` 暴露
响应式系统	Object.defineProperty	Proxy
Composition API	无	核心架构
类型支持	弱类型	强类型支持

二、具体实现方式对比

1. Vue 2 实现方式（Options API）

<!-- 父组件 -->
<template><ChildComponent ref="childRef" /><button @click="callChild">调用子组件方法</button>
</template><script>
export default {methods: {callChild() {// 直接通过 $refs 访问子组件实例this.$refs.childRef.childMethod('参数');}}
}
</script><!-- 子组件 -->
<script>
export default {methods: {childMethod(param) {console.log('子组件方法被调用', param);}}
}
</script>

2. Vue 3 实现方式（Composition API + `<script setup>`）

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import {onMounted, ref} from "vue";const helloWorldRef = ref(null)
onMounted(()=>{helloWorldRef.value?.printLog()
})
</script><template><HelloWorld ref="helloWorldRef"></HelloWorld>
</template><!-- 子组件 HelloWorld.vue -->
<script setup lang="ts">
// 必须显式暴露方法
const printLog = () => {console.log('Hello World ===')
}
// 关键！暴露方法给父组件
defineExpose({printLog
})
</script><template><h1>Hello World</h1>
</template>

三、架构差异的本质原因

1. 响应式系统重构（Proxy vs Object.defineProperty）

Vue 3 使用 Proxy 实现响应式：

封装性增强：Proxy 要求明确暴露接口
性能优化：避免 Vue 2 中递归遍历所有属性
安全控制：防止父组件意外修改子组件内部状态

2. 模块化与 Tree-shaking

未暴露的方法不会进入父组件作用域
减少不必要的代码关联
提升应用可维护性

四、原理级差异总结

维度	Vue 2	Vue 3	优势
组件模型	类实例模型	函数作用域模型	更好的 Tree-shaking
访问控制	开放所有方法	白名单暴露机制	增强封装性
响应式追踪	全实例追踪	精准依赖追踪	减少不必要的渲染
内存占用	组件实例较大	轻量级代理	提升大型应用性能
TS 支持	类型推导困难	精准类型推断	开发体验提升