vue：如何使传递给组件的对象具有反应性？

Codepen 演示 https://codepen.io/lzl124631x/pen/PayPVp?editors=1010

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

然而，当index改变。正如您在演示中看到的，单击按钮时 JSON 发生变化，但组件无法更新。

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

Your location组件填充province and city中的数据属性mounted仅钩子。当。。。的时候location道具变化，mountedhook 不会再次被调用，因此您将留下陈旧的数据。

使用计算属性代替：

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

更新了代码笔 https://codepen.io/anon/pen/gKBPGo?editors=1010

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

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