Question

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

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

但是；如果我将以下值传递给组件，由于anotherattr未在此处定义，因此会导致反应性问题：

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

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

这里建议的方法是什么？我考虑过使用validator，但由于它用于验证，因此看起来像是反模式。有没有解决此问题的实用方法？（也许打字稿有用吗？）

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
)

然后不要将prop作为Object而是作为YourProp的实例来处理。

Vue道具的反应性

1 个答案: