【VUE学习】‘兄弟组件’之间值的传递

前言：

想实现一个功能，A组件（input file）通过读取文件，保存了值，B组件（showSheet）获取这个值，显示在这个组件中。

可能有别的更好的方法。

因为对VUE不太熟悉，所以按照自己的理解，来实现这个功能。

思路：

刚开始想的解决方法是，直接在父组件C中监听input，通过addEvnetListener,来执行方法，但是这样，虽然可以获取文件，但是由于之前使用了document.getElementID(),导致this获取的值只是这个<input>，值无法传递出去。

所以放弃了使用documen来监听input这一方法，开始寻找别的方法。

那么，有没有可能，两个子组件之间可以来传递值？

还真有，A组件将数据处理，并将结果传递到B组件之中，B组件使用这个数据，实现结果显示。

核心函数：

$emit() ---> 传递

$on() ---》接收

演示：

A.vue

import Vue from 'vue'
//创建中间传递项 将值进行保存
Event = new Vue()

//'sheetvalue'为传递值的名称，可随意定义，但与接收端得一致
Event.$emit('sheetvalue',this.filesheetvalue = filekeyvalue)

B.vue

created(){
//val即为接收得值，后续可按照自己的操作来执行
    Event.$on('sheetvalue',val=>{
      console.log(val)
      this.filesheetvalue = val
      this.params.data = this.filesheetvalue
    })
  },

结果：

成功实现