更新在 Vue 组件中传递的数据对象答案

【问题标题】：Updating a data object that gets passed around Vue components更新在 Vue 组件中传递的数据对象
【发布时间】：2019-03-09 00:50:57
【问题描述】：

我是 Vue 新手，并且继承了我需要修改的代码库。有一个名为 data.js 的文件，其中包含一些包含城市信息的对象，例如：

export default {
  nyc:
    cleaning: 3,
    maintenanceS: 1
  }
}

在一个组件 index.vue 中，数据像任何其他 JS 对象一样被导入：

import data from '../components/logic/data'

在另一个组件中，它作为一个 prop 导入：

export default {
  data () {
    return {}
},
props: ['data'],
computed: {
...

我一直在阅读 Vue 指南，我对如何从父组件传递 props 有一个松散的掌握。我是否更正 index.vue 将是任何其他将“数据”作为道具的组件的父组件？

我需要让用户通过文本框修改“数据”值：

<td>Cleaning: <input type="number"  v-model.number.lazy="cleaning"/></td>

我是否正确认为 v-model 是更新这些值以便在所有组件中使用新值的正确方法？我猜我还需要在组件中编写一些 Javascript 来进行更新，但我不知道该怎么做。如何更新此值以便在使用“数据”对象的所有组件中使用它？

谢谢！

【问题讨论】：

能否提供 index.vue 和子组件的完整代码？
这里是 index.vue：pastebin.com/28wg3C4A 这是我引用的子组件：pastebin.com/GL0Db4aQ 谢谢！
你的问题不清楚，能具体用吗？
所以我需要通过输入字段更改数据对象中的值，例如我帖子中的 data.cleaning。我需要在所有组件中使用这个新值。这有意义吗？
是的，您可以更新父组件中的值，它会自动在子组件中更改

标签： javascript vue.js vuejs2

【解决方案1】：

如果父组件有多个子组件，它可以使用props 将数据传递给它们，并且该数据的父组件的任何更改都会自动影响传递的数据，假设我们有一个包含两个数字的父组件和有两个子组件，一个计算总和，另一个计算相乘：

Vue.component('sum', { 
props:["n1","n2"],
template:'<div>Sum => <h3>{{n1+n2}}</h3></div>'

})

Vue.component('mult', { 
props:["n1","n2"],
template:'<div>Mult => <h3>{{n1*n2}}</h3></div>'

})

new Vue({
  el: '#app',
data:{
      num1:0,
      num2:0       
     } 
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
     <input type="number" v-model.number.lazy="num1" class="form-control">
      <input type="number" v-model.number.lazy="num2" class="form-control">
     <span>Parent => ({{num1}},{{num2}})</span>
     <sum :n1="num1" :n2="num2"></sum>
    <mult :n1="num1" :n2="num2"></mult>
</div>

这是一个非常基本的示例，但它显示了该层次结构的用途和实用性，当我们使用表单和输入时，v-model 指令非常有用

【讨论】：