Vue获取多个子组件实时数据并整合

组件之间逻辑结构图（如下）
功能：实现在父组件中点击提交按钮后，整合子组件A和子组件B的表单数据后向后端传值。组件A和子组件B是兄弟组件。

父组件

子组件A

子组件B

1.watch监管命令变量传值

父组件中点击提交按钮后，向子组件发送命令变量，子组件获取命令变量后进行组件内数据整合传给父组件。

父组件

<el-button type="primary" size="small" @click="submitForm()">录入成果el-button>
<child :isSubmitTable="isSubmitTable">child>

data () {
  return {
    isSubmitTable: 0,
  }
},
updated () {
  console.log("updated/isSubmitTable: " + this.isSubmitTable);
  this.isSubmitTable = 0//当数据更新时命令变量isSubmitTable置为0
},
methods:{
  submitForm () {
    var _this = this
    _this.isSubmitTable = 1//命令变量为1代表请求数据
  }
}

子组件

props: ['isSubmitTable'],
watch: {
  isSubmitTable () {
    // console.log(newVal)//传过来的isSubmitTable
    console.log(this.isSubmitTable)
    if(this.isSubmitTable === 1) {
      console.log("submitMsg")
      this.submitMsg()
    }
  },
},
methods:{
  submitForm () {
    var _this = this
    //表单验证+信息整合
  }
}

最后发现该方法不可行，原因是用watch监听命令变量进行传值，需要等到父组件中的submitForm 方法执行结束后才可以进行组件间的传值，所以在父组件中进行向后端传值变得不可能。

2.用sync实现双向数据绑定

本方法的参考来源，一开始的想法是使父子组件进行双向数据绑定，当双向绑定值的值（子组件之中）变动的时候，直接在父组件获取到该值，以实现数据的获取。

父组件.

<child :data.sync="data">child>
<p>父组件data： {{ data }} p>

data () {
  return {
    data: 0,
  }
}

子组件.

<p>子组件data: {{ data }} p>
<button @click="increment('data')">增加button>

props: ['data'],
methods: {
 increment (dataName) {
    let newValue = this[dataName] + 1
    this.$emit(`update:${dataName}`, newValue)//多个数据的时候
    // this.$emit(`update:data`, newValue)
  }
}

最后我们发现一个问题，即用sync进行双向数据绑定的本质还是父组件进行手动操作（如：点击按钮）才能进行向父组件传值，this.$emit(update:data, newValue) 很好地证明了这句话。而我们需要的是事实动态同步，所以该方法并不符合我们的要求。

3.父组件通过ref 获取子组件的值

本方法的参考来源，子组件准备好需要的值，父组件直接调用不就好了吗，于是我进行了尝试。

父组件.

<child ref="msg">child>

data () {
  return {
    data: 0,
    flag: false
  }
}，
methods:{
  submitForm () {
    var _this = this
    _this.data = _this.$refs.msg.tableData
    //只要子组件的data中有tableData这个数据，我们就能在父组件中获取到他
    _this.flag= _this.$refs.msg.sendMsg()
    //只要子组件的methods中有sendMsg这个方法，我们就能在父组件中调用他
  }
}

所以，我们在父组件的submitForm 方法（可以说想调用就调用）中就可以直接调用子组件的方法或者获取到子组件的数据，而不需要发出命令后等待回应，不需要在子组件中进行手动触发响应。而在子组件中只要在调用该方法时进行简单的表单验证处理即可。

4.cookie传值

本来想实在不行就用终极大法cookie传值，但是太麻烦，总不能什么都往cookie传，还好找到了解决方法。