作为对象的 Vue 道具的反应性答案

【问题标题】：Reactivity for Vue props that are objects作为对象的 Vue 道具的反应性
【发布时间】：2019-07-16 14:05:28
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

我添加了 ES6 和 Typescript 标签，因为如果有我可以使用的新颖解决方案，我可以创建一个值观察器并将其传递给自定义 TS 或 ES6 库。我对第三方库也很满意。

标签： typescript vue.js ecmascript-6 vuejs2 vue-component

【解决方案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 的实例。

【讨论】：