Question

我有一个复杂的组件，其中包含许多双向绑定的变量，因此为了保持整洁，我将类别对象中的变量分组。

settings: {
    setting1: true,
    setting2: false,
    setting3: true
},
viewMode: {
    option1: true,
    option2: false,
    options3: true
}

然后我像这样将设置传递给我的组件

<some-component :settings.sync="settings" :viewmode.sync="viewMode"></some-component>

然后

some-component可以转换这些值并将它们发送回父级，但这就是问题所在。出现

this.$emit('update:settings.setting1', newValue)

在Vuejs中不起作用。我能找到的从某个组件更新这些值的唯一解决方案是像这样覆盖整个设置对象

props: {
    settings: {
        type: Object,
        default: () => {
            return {
                setting1: true,
                setting2: false,
                setting3: true
             }
        }
    }
},
computed: {
    localSetting1: {
        get () {
            return this.settings.setting1
        },
        set (newValue) {
            // This does not work
            this.$emit('update:settings.setting1', newValue)

            // The only thing that does seem to work, is overwriting the entire object
            this.$emit('update:settings', {
                setting1: newValue,
                setting2: this.settings.setting2,
                setting3: this.settings.setting3
            }

            // or to be less verbose, but still update the entire object
            this.$emit('update:settings', Object.assign(this.settings, {settings1: newValue}))
        }
    }
}

这似乎有点混乱。是否没有办法只更新单个嵌套属性并将其发回父级？最理想的方式就是与此类似

this.$emit('update:settings.setting1', newValue)

Answer 1

实际上 Vue 可以更新嵌套的 props，我们只需要覆盖整个 prop 对象，因为 Vue 无法跟踪嵌套的变化。

如果我们有这样的道具

props: {
  someValues: {
    'a': 1,
    'b': 2,
    'c': 3
  }
}

如果我们做出这样的改变，Vue 不会做出反应

this.someValues.a = 10

我们需要做什么

this.tmpSomeValues = { ...someValues, a: 10 }
this.someValues = this.tmpSomeValues

Vue.js可以更新嵌套属性吗？

1 个答案: