Vue：能否通过父组件容器模板ref访问子组件方法？改用provide/inject实现

1. 能否通过div的模板ref访问子组件的validate方法？ #

不能直接通过div的模板ref访问子组件的validate方法。因为test.value拿到的是原生DOM元素（div节点），并非子组件的Vue实例。虽然可以通过DOM的__vue__内部属性获取组件实例，但这是未公开的内部API，存在版本兼容性风险，绝对不推荐在生产环境使用。

正确的常规做法是直接给子组件添加模板ref，而非包裹它的div：

<!-- 父组件修改后 -->
<script setup>
import { ref } from 'vue'
const childRef = ref()

const validate = () => {
  childRef.value?.validate() // 直接调用子组件暴露的方法
}
</script>

<template>
  <div>
    <Child ref="childRef" />
  </div>
  <button @click="validate">
    click me
  </button>
</template>

2. 改用provide/inject实现的方案 #

如果不想依赖子组件ref，想用provide/inject实现父组件调用子组件方法的效果，可以通过父组件提供注册回调，子组件注入后将自身方法注册到父组件的方式实现：

步骤1：父组件提供注册逻辑 #

<!-- 父组件 -->
<script setup>
import { ref, provide } from 'vue'
// 存储子组件的validate方法引用
const childValidate = ref(null)

// 提供注册方法，供子组件传入自身的validate方法
provide('registerValidate', (validateFn) => {
  childValidate.value = validateFn
})

const validate = () => {
  childValidate.value?.() // 调用子组件的validate方法
}
</script>

<template>
  <div>
    <Child />
  </div>
  <button @click="validate">
    click me
  </button>
</template>

步骤2：子组件注入并注册方法 #

<!-- 子组件 -->
<script setup>
import { inject, onUnmounted } from 'vue'

const validate = () => {
  console.log('validate')
}

// 注入父组件提供的注册方法
const registerValidate = inject('registerValidate')
// 将当前组件的validate方法注册到父组件
registerValidate?.(validate)

// 组件卸载时清空注册引用，避免内存泄漏
onUnmounted(() => {
  registerValidate?.(null)
})
</script>

<template>
    hello
</template>

补充说明 #

• 这种方式无需依赖子组件ref，通过依赖注入完成方法传递，更适合组件层级较深的场景；如果只是简单的父子组件关系，直接用子组件ref会更直观简洁。
• 添加onUnmounted的清理逻辑，是为了避免子组件卸载后，父组件仍持有旧的方法引用，引发内存泄漏或无效调用。

内容的提问来源于stack exchange，提问作者BT101