Vue $attrs透传属性：如何通过智能感知获取属性建议？

架构老林

2026-8-20

Vue中$attrs智能感知实现方案

下面是几种适配不同Vue版本和技术栈的可行方案：

TypeScript项目方案

Vue 2 + TypeScript

通过扩展Vue全局类型，明确指定$attrs的结构：

import Vue from 'vue';

// 定义组件需要接收的attrs类型
interface MyComponentAttrs {
  somePropsHere: string;
  anotherAttr: number;
}

// 扩展Vue实例的$attrs类型
declare module 'vue/types/vue' {
  interface Vue {
    $attrs: MyComponentAttrs;
  }
}

export default Vue.extend({
  inheritAttrs: true,
  mounted() {
    // 输入this.$attrs.会自动提示somePropsHere、anotherAttr
    console.log(this.$attrs.somePropsHere);
  }
});