Vuejs 变异对象作为道具传递

Question

如果我将对象作为道具传递（引用）是否可以改变道具中的值？

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

从我读过的所有内容来看，对 prop 进行变异是错误的做事方式，因为下次更新组件时，这些值将传递回覆盖突变的子组件。但是只传递对对象的引用，因此对对象 prop 中的值的任何更改都会发生在父组件中的原始对象上。当发生这种情况时，Vuejs 也不会抱怨改变道具。

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

Answer 1

改变道具是不好的做法吗？

是的，一点没错。在更复杂的应用程序中，很容易忘记在哪里/什么/为什么发生变异

跨不同组件处理状态的正确方法是什么？

在小项目中，你真的可以为所欲为，因为你很可能能够遵循逻辑——即使一年不看项目。可能性包括：

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

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