vue：如何使传递给组件的对象反应？答案

【问题标题】：vue: how to make the object passed to component reactive?vue：如何使传递给组件的对象反应？
【发布时间】：2018-06-27 04:23:58
【问题描述】：

Codepen Demo

我有一个组件，它的 location 对象为 props。我传入的参数是locations[index]，它是从locations 数组中选择的项目。

但是，当index 更改时，组件无法做出反应。正如您在演示中看到的那样，当您单击按钮时，JSON 会发生变化，但组件无法更新。

使组件具有响应性的最佳方法是什么？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您的location 组件仅在mounted 挂钩中填充province 和city 数据属性。当 location 属性发生变化时，mounted 钩子将不会被再次调用，所以你会留下陈旧的数据。

改用计算属性：

computed: {
  province() {
    return this.location.province;
  },
  city() {
    return this.location.city;
  }
}

Updated codepen

如果您确实需要 province 和 city 是数据属性（而不是计算属性），那么您需要观看 location 属性来更新属性：

data() {
  return {
    province: null,
    city: null
  }
},
watch: {
  location: {
    immediate: true,
    handler(loc) {
      this.province = loc.province;
      this.city = loc.city;
    }
  }
}

【讨论】：

你可以绑定到 location.province。不需要计算属性或观察者。
@FINDarkside 我认为这不是真的。在我的情况下，直接绑定时属性不会更新...最初，数据由子组件中的空值填充，并且在父组件中更新 location.province 时，它不会反映在子组件中...或我错过了什么吗？
@Decade Moon 如果我没有将对象作为属性传递，而只是一个值：比如<Location :province="location.province" />，我希望在孩子中更改省值 (Location)组件，我认为计算属性也不起作用。那是对的吗？事件观察无济于事......我可以以某种方式使原始类型的道具反应吗？
@Merc 如果您通过道具向下传递原始值，则子级无法直接更新它。孩子“更新”它的唯一方法是向父母 (this.$emit('update:province', value)) 发出一个事件，以便父母可以更新它。这在docs 中有解释。
@DecadeMoon 我确实知道这一点，但我希望反过来。父母将初始道具（原始）传递给孩子，然后更新它的值。然后它应该通知孩子并且应该更新那个原语。所以这确实是标题中写的问题，但就我而言，我有原语......

【解决方案2】：

你的 prop location 中的嵌套项目不会是反应式的，你需要使用类似 lodash deepClone 的东西：

<location :location.sync="_.deepClone(loc)"></location>

就是这样，不需要观察者或其他任何东西。

【讨论】：