Options API 怎么在父组件中通过 $refs 获取子组件实例并调用其内部方法-Vue.js-PHP中文网

vue 2 中父组件可通过 $refs 调用子组件 methods 中定义的方法：需在子组件 methods 声明方法，在父组件模板用 ref="name" 绑定，在父组件 methods 中通过 this.$refs.name.method() 调用，并注意挂载时机与存在性判断。

options api 怎么在父组件中通过 $refs 获取子组件实例并调用其内部方法

在 Vue 2 的 Options API 中，父组件可以通过 $refs 获取子组件实例并调用其定义的方法，前提是子组件已正确注册引用且方法是公开可访问的（即定义在 methods 选项中）。

1. 在子组件中定义要暴露的方法

确保子组件在 methods 选项中声明目标方法，不需要额外修饰（Vue 2 默认所有 methods 都是响应式可调用的）：

// ChildComponent.vue
export default {
  methods: {
    focusInput() {
      const input = this.$refs.inputField;
      if (input) input.focus();
    },
    resetForm() {
      this.form = { name: '', email: '' };
    }
  }
}

2. 在父组件模板中为子组件添加 ref 属性

使用 ref 指令为子组件标签指定一个唯一 ref 名称（注意：不是绑定 :ref，而是静态字符串）：

Vuejs

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

下载

<template><div>
    <child-component ref="childComp"></child-component><button>聚焦子组件输入框</button>
  </div>
</template>

3. 在父组件 methods 中通过 $refs 调用子组件方法

在父组件的 methods 中，通过 this.$refs.refName 访问子组件实例，然后直接调用其方法：

export default {
  methods: {
    callChildMethod() {
      // 确保子组件已挂载且 ref 存在（尤其在 v-if 或异步场景下）
      if (this.$refs.childComp) {
        this.$refs.childComp.focusInput();
      }
    }
  }
}

注意：如果子组件被 v-if 控制、或尚未完成挂载（例如在 created 钩子中立即访问），this.$refs.childComp 可能为 undefined。推荐在 mounted 后调用，或加存在性判断。