Vue.js中如何将methods内的值传递给其他函数？以传递ffid到uploadFileChunk为例

你当前的ffid是getDataSource方法内forEach循环的局部变量，且uploadFileChunk是独立的外部函数，可根据使用场景选择以下实现方式：

方案1：修改uploadFileChunk参数列表直接传值（单次调用场景首选） #

直接给外部函数增加入参接收ffid，在getDataSource内计算出ffid后调用时传入即可：

1. 调整uploadFileChunk的参数定义：

// 新增第四个参数ffid
function uploadFileChunk(fileData, uploadInfo, destinationDirectory, ffid) {
  let self = this;
  // 此处可直接使用传入的ffid
  console.log('获取到的ffid值：', ffid)
  let reader = new FileReader();
  reader.onload = function() {
    console.log(reader.result);
  }
  reader['readAsDataURL'](fileData);
  return objectProvider.uploadFileChunk(
    fileData,
    uploadInfo,
    destinationDirectory
  );
}

2. 在getDataSource内调用时传值：

methods: {
  getDataSource() {
    let self = this;
    // 如果需要收集循环生成的所有ffid，可在此处声明数组存储
    // const ffidList = []
    arr.forEach((item) => {
      let tokens = item.path.replace(/^\/|\$/g, "").split("/");
      let fid = item.fid;
      let current = tree;
      for (let i = 0; i < tokens.length; i++) {
        if (!current[tokens[i]]) {
          current[tokens[i]] = {
            fid: item.fid
          };
        }
        current = current[tokens[i]];
      }
      let ffid = Number(item.fid) + 1;
      // 循环内需要对应当前item调用上传时，直接在此处传参
      // uploadFileChunk(文件参数, 上传信息参数, 目录参数, ffid)
      // 需要收集所有ffid时写入数组
      // ffidList.push(ffid)
    });
    // 循环结束后统一调用时，传入对应ffid或整个ffid数组即可
    // uploadFileChunk(文件参数, 上传信息参数, 目录参数, ffidList)
  }
}

方案2：存入Vue实例data（多场景复用ffid首选） #

如果ffid需要在组件的多个方法、模板中复用，可以将值存在Vue的响应式data中：

1. 先在组件data中声明对应存储字段：

data() {
  return {
    // 存储单个ffid用基础类型
    ffid: null,
    // 存储多个ffid用数组
    // ffidList: []
  }
}

2. 在getDataSource内完成赋值：

methods: {
  getDataSource() {
    let self = this;
    arr.forEach((item) => {
      // 原有逻辑不变
      let ffid = Number(item.fid) + 1;
      // 存单个ffid直接赋值，取最后一次循环值
      self.ffid = ffid
      // 存所有ffid就push进数组
      // self.ffidList.push(ffid)
    });
  }
}

3. 调用uploadFileChunk时直接从Vue实例取值即可，也可以通过call绑定this上下文省略参数：

// 方式1：直接传值
uploadFileChunk(fileData, uploadInfo, destinationDirectory, this.ffid)

// 方式2：绑定Vue实例为函数上下文，不需要新增参数
uploadFileChunk.call(this, fileData, uploadInfo, destinationDirectory)
// 绑定后uploadFileChunk内的self.ffid就可以直接读取到data里的ffid值

注意事项 #

• 由于ffid是在forEach循环中生成，多个item会生成多个ffid，需要提前确认是要使用所有ffid集合，还是特定item对应的ffid，避免出现只拿到最后一次循环值的问题
• 如果uploadFileChunk是第三方封装不可修改参数，优先使用绑定this上下文或者闭包的方式传值

内容的提问来源于stack exchange，提问作者Andy