Vue3 Composition API中使用TypeScript操作DOM遇TS错误求助

问题根源 #

你遇到的错误核心是：document.querySelectorAll/querySelector返回的是DOM元素对象，而_props是Vue组件实例的内部属性，DOM元素本身不存在这个属性——哪怕你把它断言成HTMLElement也没用，因为HTMLElement同样没有_props。

正确解决方式 #

Vue组件实例和DOM元素是两个不同的对象，要访问组件的_props（更推荐用公开的props），得先拿到Vue的组件实例：

1. 组件内部直接获取（推荐）

如果是在组件的setup函数里，直接用getCurrentInstance获取当前组件实例，就能访问props：

import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
if (instance) {
  // 优先用公开的props属性，而非内部的_props
  const value = instance.props.value;
  // 若确实需要访问内部的_props（不推荐，可能随版本变动）
  // const value = instance._props.value;
}

2. 通过DOM元素获取组件实例

如果是从组件外部通过DOM节点获取实例，Vue 3会把组件实例挂载在DOM元素的__vnode?.component上：

// 先获取DOM元素
const el = document.querySelector('my-element');
if (el) {
  // 断言类型并获取组件实例
  const componentInstance = (el as any).__vnode?.component;
  if (componentInstance) {
    // 访问props
    const value = componentInstance.props.value;
    // 或者访问内部的_props
    // const value = componentInstance._props.value;
  }
}

额外提醒 #

• 尽量避免直接访问_props这类Vue内部属性，它们不属于公开API，版本迭代中可能被修改或移除，优先使用instance.props。
• 如果是单个元素，用document.querySelector而非querySelectorAll，后者返回的是节点列表，需要遍历才能拿到单个元素。

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