Vue 3中不使用$refs从父组件访问SFC数据属性的方法

嘿，我来帮你捋清楚这个问题！你遇到的核心困惑其实是Vue 3不同组件写法里，属性对外暴露的规则不一样——有些属性是组件的「元信息」（和实例无关），有些是组件实例的「内部状态」，访问方式完全不同。

先帮你分析下之前的尝试为啥没成功：

• 把icon放在data()里：这属于组件实例的内部响应式状态，默认是私有的，父组件没法直接通过导入模块的方式访问，必须通过组件实例（比如$refs）或者专门的暴露机制才能拿到。
• setup()选项里返回的变量：同样属于实例属性，即便你用了ref/computed，父组件也得通过$refs获取子组件实例才能访问，直接拿模块导出是不行的。
• <script setup>里的defineExpose：这个确实能把变量暴露出去，但依然需要父组件通过$refs拿到子组件实例才能读取，不是直接通过模块导入访问的。

接下来给你两种针对性的解决方案，看你需求选：

场景一：icon是静态元信息（比如路由图标、组件标识） #

如果icon不会动态变化，只是用来标记组件的静态属性，那你最开始的写法其实是有效的！直接把icon放在组件导出的根级别（选项式API的export default里），父组件就能通过导入的模块直接访问：

Home.vue

<template>
  <div>Home component</div>
</template>

<script>
export default {
  name: 'Home',
  icon: 'house-icon' // 根级别自定义选项，不属于实例状态
}
</script>

父组件

import Home from './Home.vue'

console.log(Home.icon) // 直接拿到 'house-icon'

这种方式下，icon是组件模块的导出属性，和组件实例无关，所以不用依赖$refs就能直接访问。

场景二：icon是响应式状态（会动态变化） #

如果icon是组件内部的响应式数据，还希望父组件能实时获取它的变化，又不想用$refs，那推荐用provide/inject机制：

用<script setup>实现 #

Home.vue

<template>
  <div>Home component</div>
</template>

<script setup>
import { ref, provide } from 'vue'

const icon = ref('house-icon')
// 把响应式的icon提供给父组件
provide('homeIcon', icon)
</script>

父组件

<script setup>
import { inject } from 'vue'
import Home from './Home.vue'

// 注入子组件提供的icon
const homeIcon = inject('homeIcon')
console.log(homeIcon.value) // 实时获取icon的变化
</script>

用选项式API实现 #

Home.vue

<template>
  <div>Home component</div>
</template>

<script>
export default {
  data() {
    return {
      icon: 'house-icon'
    }
  },
  provide() {
    // 把data里的icon提供给父组件
    return {
      homeIcon: this.icon
    }
  }
}
</script>

父组件

<script>
import { inject } from 'vue'
import Home from './Home.vue'

export default {
  setup() {
    const homeIcon = inject('homeIcon')
    console.log(homeIcon)
    return { homeIcon }
  }
}
</script>

这种方式下，父组件不需要依赖$refs，就能拿到子组件内部的响应式状态，而且状态变化时父组件也能实时感知。

备注：内容来源于stack exchange，提问作者Tolbxela