typescript - 作为对象的 Vue 道具的反应性

Question

我有一个组件，它有一个名为value（用于v-model）的道具，道具的类型是一个对象。这是 prop 的示例值value：

{type: "column": {value: {column: "col1", anotherattr: "test"}}}

然而; 如果我将以下值传递给组件，则会导致反应性问题，因为anotherattr此处未定义：

{type: "column": {value: {column: "col1"}}}

我希望组件能够验证架构并使属性自动响应，因为anotherattr它实际上是一个可选属性。

这里建议的方法是什么？我考虑过使用validator，但它看起来像一个反模式，因为它用于验证。这个问题有什么实用的方法吗？（也许 Typescript 有帮助？）

标签： typescriptvue.jsecmascript-6vuejs2vue-component

Answer 1

使用 Typescript，您可以执行以下操作：

export class YourProp {
    constructor(
        public value: YourValue
    )
}

export class YourValue {
    constructor (
        public columnName: String,
        public anotherAttr: String = "default" // give it a default value since its optional
)

然后不要将道具作为对象处理，而是作为 YourProp 的实例。