Vuejs 变异对象作为道具传递

Question

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

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

从我读过的所有内容来看，改变 prop 是错误的做事方式，因为下次更新组件时，值会传回子组件，覆盖改变。但是只有对对象的引用被传递，所以对 object 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

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

绝对是。在更复杂的应用程序中，很容易忘记 where/what/why is mutated

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

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

变异道具（丑陋但会工作）
使用事件改变父组件中的状态；看看 EventBus（更好）
使用全局共享状态；看看 Vuex（最好，但样板文件多一点）

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

Answer 2

我想我明白你想做什么，你想将数据传递给子组件，改变它，然后将该数据返回给父组件。

您永远不想改变提供给子组件的 props 数据，但是您可以改变数据的本地状态，它可以是 prop 的精确克隆。

您可以通过多种方式做到这一点，我通常使用 Vue 文档中建议的计算属性： https://vuejs.org/v2/guide/components-props.html

在计算的 return 中，只有 return 来自属性的数据。

Vuejs 变异对象作为道具传递

Vuejs Mutating Object passed as a prop

javascript

object

prop

dplyr

vue.js

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

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