作为对象的 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 中的数据具有反应性

来自 reactive() 的 Vue3/Vuex 对象一旦在突变中作为有效负载传递给 vuex,就会失去反应性

直接从 vue 3 设置中获得的道具不是反应式的

Vue 是不是支持 Map 和 Set 数据类型的反应性?

Vue.js 3 - 替换/更新反应性对象而不会失去反应性

如何在Vuejs中将反应性道具传递给孩子