作为对象的 Vue 道具的反应性
Posted
技术标签:
【中文标题】作为对象的 Vue 道具的反应性【英文标题】:Reactivity for Vue props that are objects 【发布时间】: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 库。我对第三方库也很满意。 【参考方案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 的实例。
【讨论】:
以上是关于作为对象的 Vue 道具的反应性的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Vue js 中使 localStorage 中的数据具有反应性