Options API 怎么在父组件中通过 $refs 调用子组件暴露的方法-Vue.js-PHP中文网

options api 中父组件可通过 $refs 直接调用子组件 methods、访问 data 和 computed，无需 defineexpose；需确保子组件已挂载，且 ref 名称一致。

options api 怎么在父组件中通过 $refs 调用子组件暴露的方法

在 Options API 中，父组件通过 $refs 调用子组件方法是直接且明确的，不需要 defineExpose（那是 Composition API <script setup></script> 的机制）。只要子组件在 methods、data 或 computed 中定义了可访问的成员，父组件就能通过 $refs.xxx 访问并调用。

关键前提是：子组件必须已挂载，且父组件在合适的时机（如 mounted 或事件回调中）调用。

✅ 正确写法：子组件定义方法，父组件用 `$refs` 调用

子组件（ChildComponent.vue）

<template><div>我是子组件</div>
</template><script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      internalCount: 0
    }
  },
  methods: {
    // 这个方法默认对外可见，无需额外暴露
    resetCount() {
      this.internalCount = 0
      console.log('计数已重置')
    },
    sayHi(name) {
      return `Hello, ${name}!`
    }
  }
}
</script>

父组件（ParentComponent.vue）

<template><div>
    <childcomponent ref="child"></childcomponent><button>调用子组件方法</button>
  </div>
</template><script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  methods: {
    callChildMethod() {
      // ✅ 直接通过 $refs.child 访问子组件实例
      const child = this.$refs.child
      if (child) {
        child.resetCount() // 调用方法
        console.log(child.sayHi('Vue')) // 带参数调用，返回值可接收
      }
    }
  }
}
</script>

⚠️ 注意事项

$refs.child 拿到的是完整的子组件实例（即 VueComponent 实例），等同于 Vue2 中的 this，所以它能访问：

Vuejs
Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载
- data 中的数据（如 child.internalCount）
- methods 中的方法（如 child.resetCount()）
- computed 属性（如 child.someComputed）
- props（只读）、$emit 等所有实例属性
不需要 defineExpose —— 这是 <script setup></script> 的专属语法，在 Options API 中不生效，也不需要。
$refs 是异步更新的，确保在 mounted 后或 DOM 渲染完成后再访问（比如放在按钮点击里通常没问题；若在 created 中立即用，$refs.child 可能为 undefined）。
如果子组件是异步加载（如 defineAsyncComponent），需等其加载完成再调用，否则 $refs.child 可能为空。

❌ 常见错误

在 created 钩子中直接写 this.$refs.child.resetCount() → 此时子组件尚未挂载，$refs.child 为 undefined
在子组件中用 <script setup></script> 却误以为 Options API 写法也适用 defineExpose → 不兼容，会报错或无效
给 ref 起名和 $refs 访问名不一致，例如模板写 ref="myChild"，代码却写 this.$refs.child → 名字必须严格匹配