Vue3组合式API中，能否通过模板引用获取组件属性？有无替代defineExpose的方案？

在Vue3的<script setup>语法糖下，组件内部属性默认是封闭的，父组件无法直接通过模板引用访问。除了官方推荐的defineExpose，确实还有几种替代方案，但各有适用场景和局限性：

1. 子组件不使用<script setup> #

如果子组件改用普通的组合式API写法（不用<script setup>），setup函数返回的所有属性会自动挂载到组件实例上，父组件可直接通过模板引用访问：

子组件代码：

<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    const someData = ref('my special data')
    // 返回的属性会暴露给父组件
    return { someData }
  }
}
</script>

这种情况下，你原来的父组件代码无需修改，childRef.value.someData就能直接拿到对应值。

2. 使用provide/inject传递数据 #

如果只是要获取子组件的特定属性，没必要直接操作子组件实例，用provide/inject实现跨组件数据传递更符合Vue的响应式数据流设计：

子组件代码：

<script setup lang="ts">
import { ref, provide } from 'vue'

const someData = ref('my special data')
// 向父组件提供数据
provide('someData', someData)
</script>

父组件代码修改为：

<script setup lang="ts">
import { inject } from 'vue'

// 注入子组件提供的数据
const someData = inject<Ref<string>>('someData')

const foo = () => {
  console.log(someData?.value)
}
</script>

<template>
  <Child />
</template>

3. 通过props反向同步（不推荐） #

可以把父组件的一个响应式变量通过props传给子组件，子组件内部将属性值同步到这个变量上。但这种方式违反了props单向绑定的设计原则，容易导致数据流混乱，仅适合临时应急：

父组件代码：

<script setup lang="ts">
import { ref } from 'vue'

const childSomeData = ref('')

const foo = () => {
  console.log(childSomeData.value)
}
</script>

<template>
  <Child :sync-data="childSomeData" />
</template>

子组件代码：

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{ syncData: Ref<string> }>()
const someData = ref('my special data')

// 初始化和变化时同步数据到父组件的props
watch(someData, (newVal) => {
  props.syncData.value = newVal
}, { immediate: true })
</script>

4. 访问内部私有属性（强烈不推荐） #

Vue3的<script setup>会把内部属性封装在实例的私有字段中（比如$.someData），调试时可能发现childRef.value.$.someData能拿到值，但这是Vue的内部实现细节，无官方支持，版本更新随时可能失效，绝对不能用在生产环境。

总结 #

官方推荐的defineExpose是最安全、最符合设计规范的方式，能明确控制子组件暴露给父组件的API。如果不想用它，优先考虑子组件不用<script setup>或者provide/inject的方案，尽量避免反向同步props和访问私有属性。

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