Vue3如何从外部调用组件方法？替代Vue2的$children方案

Vue3 中已移除 $children 属性，无法再通过 vm.$children[0].someMethod() 这类方式调用组件内部方法。以下是两种可靠的替代实现方案：

方案1：通过Ref直接获取组件实例并调用方法 #

这是最贴合Vue3设计理念的直接方案，通过明确的ref标记定位组件：

1. 给目标组件添加ref标记 #

修改app.vue，在模板中为根组件（或目标子组件）添加ref：

<template>
  <div ref="appRoot"></div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      data: []
    }
  },
  methods: {
    async someMethod() {
      this.data.push(1);
      console.log("数据已更新：", this.data);
    }
  }
}
</script>

2. 挂载后获取组件实例并暴露到全局 #

修改app.js，挂载后直接获取根组件实例，将其暴露到window供外部访问：

import { createApp } from "vue";
import App from "./app.vue";

const app = createApp(App);
// mount方法返回的就是根组件实例
const rootComponent = app.mount("#app");

// 将组件实例挂载到window，方便外部脚本调用
window.rootComponent = rootComponent;

外部调用示例 #

在浏览器控制台或外部API脚本中，直接调用组件方法：

rootComponent.someMethod();

方案2：通过事件触发（适合解耦场景） #

如果需要组件与外部代码解耦，可通过事件触发执行方法：

1. 在组件内部监听自定义事件，触发时执行对应方法；
2. 外部通过组件实例触发该事件。

修改app.vue添加事件监听：

<script>
// 若使用Vue3 setup语法或需要更通用的事件总线，可引入mitt库
import mitt from 'mitt'
const emitter = mitt()

export default {
  name: "App",
  data() {
    return {
      data: []
    }
  },
  mounted() {
    // 监听自定义事件
    emitter.on("call-some-method", () => {
      this.someMethod();
    });
  },
  methods: {
    async someMethod() {
      this.data.push(1);
      console.log("数据已更新：", this.data);
    }
  }
}
</script>

外部调用时触发事件：

emitter.emit("call-some-method");

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