问个关于vue的问题

Question

有一个表单组件 <form>
有一个表单项组件 <form-input>

<form>
    <form-input></form-input>
    <form-input></form-input>
    <form-input></form-input>
</form>

需求是，其中一个form-input的值改变，计算出三个的form-input之和，
这种用vue怎么写呢？不能用vuex和prop

Answer 1

根据你的代码，简单写了一下，实现的思路有很多

<input ref='input-1' @change='changeText' /><br />
<input ref='input-2' @change='changeText' /><br />
<input ref='input-3' @change='changeText' />

changeText() {
    for (var i = 1; i <= 3; i++) {
        console.log(this.$refs['input-' + i].value)
    }
}

Answer 2

在回答之前先说下自己的疑问：
不用vuex可以理解，但是为什么要不能用prop？

不能用prop，就类似于，你要实现一个函数，求2个变量的和，但是这个函数不能传参数进来。

本身vue就是基于数据进行驱动，你这相当于丢掉小汽车，骑个小黄车，哈哈。

----下面是我的想法，要是实在不能用 prop，相对于用 ref 可能用事件会好些。

  // template
  <form-item @change="change"/>
  <form-item @change="change"/>
  <form-item @change="change"/>

  // form组件
  data(){
    return {
      total:{}
    }
  }
  computed:{
   totalData(){
     // 对 total 进行循环求和
   }
  }
  method:{
      change(formItem){
        total[formItem.id] = formItem.val
      }  
  }

  

Answer 3

计算属性不行么？

Answer 4

用compute不就行了？