Обновление объекта данных, который передается вокруг компонентов Vue

Question

Я новичок в 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, и у меня есть свободное понимание того, как реквизиты передаются из родительского компонента.Правильно ли я, что index.vue будет родительским компонентом любого другого компонента, который принимает «данные» в качестве реквизита?

Мне нужно разрешить пользователю изменять значения «данных» через текстовое поле:

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

Правильно ли я считаю, что v-модель является правильным способом обновления этих значений, чтобы новые значения использовались во всех компонентах?Я предполагаю, что мне также нужно написать Javascript в компоненте для обновления, но я не знаю, как это сделать.Как мне обновить это значение, чтобы оно использовалось во всех компонентах, которые используют объект 'data'?

Спасибо!

Answer 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 очень полезна, когда мы работаем с формами ивходы