时间戳

首页 > 解决方案 > 更新在 Vue 组件中传递的数据对象

javascript - 更新在 Vue 组件中传递的数据对象

问题描述

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

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

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

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

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

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 来进行更新，但我不知道该怎么做。如何更新此值以便在使用“数据”对象的所有组件中使用它？

谢谢！

标签： javascriptvue.jsvuejs2

解决方案

如果父组件有多个子组件，它可以使用传递数据给它们，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当我们使用表单和输入时，该指令非常有用

推荐阅读