如何在未知变量名时访问Vue3实例并调用组件函数？

为什么$0在JS文件中是undefined？ #

$0是Chrome开发者工具仅在控制台交互时生效的临时变量，代表当前选中的DOM元素，在JS文件代码运行环境中并不存在，所以直接调用会返回undefined。

方案1：通过DOM元素获取单个组件实例并调用函数 #

Vue3中，每个组件的根DOM元素上默认挂载了__vue__属性（开发环境默认开启，生产环境需手动配置），可通过该属性获取组件实例：

// 1. 先通过DOM选择器定位到目标组件的根元素
const targetComponentEl = document.querySelector('.target-component-class');
if (targetComponentEl) {
  // 2. 获取组件实例
  const componentInstance = targetComponentEl.__vue__;
  // 3. 调用组件内的特定函数
  componentInstance.yourTargetFunction();
}

生产环境注意：Vue3默认在生产环境隐藏__vue__属性，需在应用初始化时开启devtools配置：

const app = createApp(App);
// 开启后生产环境也会保留组件实例的DOM挂载属性
app.config.devtools = true;
app.mount('#app');

方案2：获取全局Vue应用实例 #

如果需要访问整个Vue应用实例，可通过以下两种方式：

1. 初始化时挂载到window（推荐）：
   在应用启动代码中，将app实例挂载到全局window对象：

   const app = createApp(App);
   app.mount('#app');
   // 挂载到全局，方便后续任意JS文件访问
   window.vueGlobalApp = app;
   

   之后在JS文件中直接通过window.vueGlobalApp访问应用实例。

2. 通过DevTools钩子获取：
   Vue3会将应用实例注册到DevTools的全局钩子中，可通过以下方式获取：

   // 获取第一个Vue应用实例（页面多个应用时需调整索引）
   const vueApp = window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps[0];
   

方案3：组件内暴露函数（适用于可修改组件代码的场景） #

如果能修改目标组件的代码，可通过defineExpose暴露需要调用的函数，再通过父组件的ref获取实例调用：

<!-- 目标组件代码 -->
<script setup>
function targetFunction() {
  console.log('调用目标函数');
}
// 暴露函数给父组件
defineExpose({ targetFunction });
</script>

父组件中通过ref获取实例并调用：

<!-- 父组件代码 -->
<script setup>
import { ref } from 'vue';
const childComponentRef = ref(null);

function callChildFunction() {
  childComponentRef.value?.targetFunction();
}
</script>

<template>
  <ChildComponent ref="childComponentRef" />
</template>

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