Vuejs 变异对象作为 prop 传递

如果我将一个对象作为 prop 传递（引用），可以改变 prop 中的值吗？

我正在开发一个网络应用程序，需要将大量值传递给组件，并且我正在尝试找到将值传递给组件并返回给父级的最佳方法。

从我读到的所有内容来看，改变 prop 是错误的做法，因为下次更新组件时，值会传递回子组件并覆盖突变。但仅传递对对象的引用，因此 object prop 中的值的任何突变都会发生在父组件中的原始对象上。此外，当发生这种情况时，Vuejs 不会抱怨 props 发生变化。

const subComponent = {
    name: "subComponent",
  template: `
    <div>
        Sub Component Input
        <input type="text" v-model="objectProp.val1"></input>
    </div>`,
  props: {
    objectProp: {
      required: false,
      default: () => {return {val1: "carrot"}}
    }
  }
}

const aComponent = {
    name: "aComponent",
  template: `
    <div>
        val1: {{mainObject.val1}}
        val2: {{mainObject.val2}}
        <sub-component :objectProp="mainObject"></sub-component>
    </div>`,
  data: function() {
      return{
        mainObject: {
        val1: "foo",
        val2: "bar"
      }
    }
  },
  components: {
    subComponent
  }
}

new Vue({
  el: "#app",
    components: {
    aComponent
  }
})

这是一个 JSFiddle，显示了正在发生变化的对象属性。

JSFiddle https://jsfiddle.net/StivnC/voe6pyag/16/

改变 prop 是一种不好的做法吗？

是的，一点没错。在更复杂的应用程序中，很容易忘记变异的位置/内容/原因

是什么right处理不同组件状态的方法？

在小型项目中，您确实可以做任何您想做的事情，因为您很可能能够遵循逻辑 - 即使在一年没有查看该项目之后。可能性包括：

1. 变异道具（丑陋但有用）
2. 使用事件来改变父组件中的状态；看看 EventBus（更好）
3. 使用全局共享状态；看看 Vuex （最好，但有更多样板）

然而，在大型项目中，你绝对应该使用 Vuex。它是 Vue 的一个模块，可将全局共享状态添加到您的应用程序中，您可以从应用程序中的所有位置访问和更改该状态。