如何从 Vue.js 中的方法向函数传递值？答案

【问题标题】：how to pass value to function from methods in Vue.js?如何从 Vue.js 中的方法向函数传递值？
【发布时间】：2021-07-15 01:42:34
【问题描述】：

如何从 Vue.js 中的方法向函数传递值？

我在方法中得到了一个值，但是我需要将这个值传递给其他函数，我该怎么做？

methods: {
  getDataSource() {
    let self = this;
    arr.forEach((item) => {
      //debugger;
      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;
      //console.log(ffid);
    });
}


function uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
  let self = this;
  //debugger
  let reader = new FileReader();
  reader.onload = function() {
    console.log(reader.result);
  }
  reader['readAsDataURL'](fileData);
  return objectProvider.uploadFileChunk(
    fileData,
    uploadInfo,
    destinationDirectory
  );
}

我想将 ffid 值传递给函数 uploadFileChunk，如何获得 ffid 值？

【问题讨论】：

这个uploadFileChunk 是在哪里定义的？它是否在方法部分下的同一文件中定义？
你试过什么？大概你会打电话给uploadFileChunk(ffid, someUploadInfo, someDestinationDirectory)。那不行吗？
@Amaarrockz 那是方法之外的功能。
@Phil yse，它不起作用，所以我不能使用它
@Amaarrockz 这是同一个文件，但不在方法部分中

标签： javascript function vue.js vuejs2

【解决方案1】：

如果两个处理程序都在同一个文件中，那么您可以像这样发送它

methods: {
  getDataSource() {
    let self = this;
    arr.forEach((item) => {
      //debugger;
      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;
      //Since that function is defined outside try calling it as below
      uploadFileChunk(ffid); // Note that the upload file Chunk accepts three arguments so make sure you pass the other two as well
    });
}

【讨论】：

不，我不能用那个，我以前试过，如果我用那个我不能得到数据，我不知道为什么。因为我没有收到任何错误或崩溃。
然后在方法里面定义，有什么问题？

【解决方案2】：

只需将函数添加为方法并使用此

methods: {
  getDataSource() {
    let self = this;
    arr.forEach((item) => {
      //debugger;
      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;
      this.uploadFileChunk(ffid)      
    });

  uploadFileChunk(fileData, uploadInfo, destinationDirectory) {
    let self = this;
    //debugger
    let reader = new FileReader();
    reader.onload = function() {
      console.log(reader.result);
    }
    reader['readAsDataURL'](fileData);
    return objectProvider.uploadFileChunk(
      fileData,
      uploadInfo,
      destinationDirectory
    );
  }
}

如果你真的想将它作为一个独立的函数使用，我建议你创建一个帮助文件并导入它

upload-helpers.js（名称由您决定）

export function uploadFileChunk(fileData, uploadInfo, destinationDirectory) => {
    let self = this;
    //debugger
    let reader = new FileReader();
    reader.onload = function() {
      console.log(reader.result);
    }
    reader['readAsDataURL'](fileData);
    return objectProvider.uploadFileChunk(
      fileData,
      uploadInfo,
      destinationDirectory
    );
  }

在你的 Vue 组件中

import { uploadFileChunk } from './upload-helpers'

methods: {
  getDataSource() {
    let self = this;
    arr.forEach((item) => {
      //debugger;
      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;
      uploadFileChunk(ffid)  
    });
}

【讨论】：