TE vue-property-decorator 项目拿不到Vue.prototype上的属性和方法

背景:项目是 vue2.6.xx + TS + 二开组件(基于 elment-ui 开发) ,项目完全可以脱离安装 elment-ui ,直接安装二开组件;二开组件支持 elment-ui 原有写法,直接引用二开组件的 this.$message,就出现如下问题;


报错:TS2339: Property ‘$message’ does not exist on type 'XXX.

vue2.6.xx + TS 项目,vue文件写法如下:

import { Component, Vue } from 'vue-property-decorator';

@Component({
  name: 'template',
})
export default class template extends Vue {
  initPage() {
    this.$message({ type: 'success', message: '初始化' });
  }
}

分析过程:

1、在main.ts打印 console.log(Vue.prototype)是有 $message 的;但是在 .vue文件打印 console.log(this) 没有 $message
2、于是在项目引用 this.$message 地方,如下操作:

initPage() {
     (this as any).$message({ type: 'success', message: '初始化' });
 }

错误不报了,也可以正常运行,说明 extends Vue 的写法,this 声明的类型不全,导致获取不到 Vue.prototype 上的方法;
3、于是在shims-tsx.d.ts 文件进行类型的声明;

declare module 'vue/types/vue' {
  interface Vue {
    $message: any;
  }
}

vue文件正常引用,不报错了

initPage() {
     this.$message({ type: 'success', message: '初始化' });
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值
>