更新在Vue组件周围传递的数据对象-Java 学习之路

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

谢谢！

1 回答

如果父组件有多个子组件，它可以使用 props 将数据传递给它们，并且该数据的父组件中的任何更改都会自动影响传递的数据，让's suppose we have a parent component which contains two numbers and there'的两个子组件，一个计算总和，另一个用于乘以它们：

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 指令非常有用

回复于 2024-05-04T02:55:35+08:00

更新在Vue组件周围传递的数据对象

1 回答

相关问题