Vue 组件道具上的数组类型打破了 Linter

Posted

技术标签:

【中文标题】Vue 组件道具上的数组类型打破了 Linter【英文标题】:Array type on Vue Component Props breaks the Linter 【发布时间】:2018-12-02 11:11:27 【问题描述】:

我正在使用 Vue.extend 创建一个带有 Array prop 的 AppProps 类...

import Vue from 'vue';
import Component from 'vue-class-component';

const AppProps = Vue.extend(
  props: 
    test1: String,
    test2: Array,
  ,
);

然后扩展 AppProps 来创建我的组件..

@Component()
export default class ArrayPropsExample extends AppProps 
  get computedMessage() 
    return this.test1 + ' ' + this.test2;
  

这是根据 vue-class-component 中的打字稿示例。 Vue 很高兴,但 linter 抱怨它在课堂上看不到我的道具类型......

19:17 类型“ArrayPropsExample”上不存在属性“test1”。 17 |导出默认类 ArrayPropsExample 扩展 AppProps 18 |获取计算消息()

19 |返回 this.test1 + ' ' + this.test2; | ^ 20 | 21 |

相关代码在这里(https://github.com/javascriptMick/vue-d3-poc/blob/master/src/components/ArrayPropsExample.vue)

如果我将 test2 类型设置为 String,linter 很高兴,但使用 Array 似乎会破坏 linter.. 这很奇怪且不一致

【问题讨论】:

【参考方案1】:

好的,所以我可以通过改变我的方法解决这个问题。本质上是在我的 tsconfig 中引入 vue-property-decorator 并设置 script=false ...

import Vue from 'vue';
import Component from 'vue-class-component';
import  Prop  from 'vue-property-decorator';

@Component
export default class ArrayPropsExample extends Vue 
  @Prop( default: 'hello' )
  public test1: string;

  @Prop( default: [])
  public test2: any[];

  get computedMessage() 
    return this.test1 + ' ' + this.test2;
  

反正我更喜欢这种方法。

【讨论】:

以上是关于Vue 组件道具上的数组类型打破了 Linter的主要内容,如果未能解决你的问题,请参考以下文章

如何更新手动安装的 vue 组件上的道具?

如何传递对象的vue组件道具数组?

Vue Utils 无效的道具

为啥 vue v-model 不适用于数组道具?

[Vue 警告]:无效的道具:道具“值”的类型检查失败。预期的数组,得到值为 1 的数字

Vue2:使用输入类型为 textarea 的表单组件来显示和编辑数据(无需直接操作道具)