如何在不同的函数中传递变量答案

【问题标题】：how to pass variable within different function如何在不同的函数中传递变量
【发布时间】：2020-03-16 21:42:35
【问题描述】：

我在 vue app 方法中有两个不同的函数，它们的一些代码有限制，不能合并。但同时我需要函数f1 中的一些变量在函数f2 中使用。

<script>
let item1;
export default {
  data(): return{},
  methods: {
    function f1(){
      const item1 = value1;
    },
    function f2(){
      const item2 = item1;
      console.log(item2);
    }
  },
  mounted: {
    this.f1();
    this.f2();
  }
}

这是一个示例代码，我需要 item2 读取 item1 值。 item1 的值只能从函数f1 中检索，而函数f2 需要该值。有什么东西可以让变量变成全局变量吗？

【问题讨论】：

在函数中声明的东西在其他函数中不可用。

标签： javascript vue.js

【解决方案1】：

你需要做这样的事情

// Global Scope you can access these items
let item1;
let item2;

function one() {
  // function scope can access items on the global scope
  // but anything defined within here will not be accessible by the global scope
  item1 = 'item1';
}

function two() {
  // function scope
  item2 = item1;
  console.log(item2);
}

one();
two();

您的示例不起作用的原因是由于scope。

你的 vue.js 文件应该是这样的

<script>
export default {
  data() {
    return {
      item1: null,
      item2: null
    }
  },
  methods: {
    f1() {
      this.item1 = 'item1';
    },
    f2() {
      this.item2 = this.item1;
    }
  },
  mounted() {
    this.f1();
    this.f2();
  }
}
</script>

【讨论】：

我了解这个解决方案在纯 js 中是如何工作的。但这在我的 vuejs 中出现了问题。我应该在哪里声明 let item1; 应该是。在此之前，我尝试在启动脚本后声明变量，但没有奏效。该函数应在方法中：{} 部分，
@KhairulHabib 请查看我的更新答案，您需要将变量存储在 data() 对象中
我也试过这个，它返回空值
我已经成功地使用了一些新方法来解决这种情况，我在函数 f1 中调用 this.f2(this.item1)。谢谢你的分享。

【解决方案2】：

这实际上是我面临的同样问题。

然后我发现vue中的标签和html中的标签几乎相同。您始终可以编写自己的 js 代码并选择要导出为默认的部分，即精确的组件定义。

因此，您可以轻松地执行此操作来访问来自不同方法、监视、计算甚至数据的变量。

<template>
    <div>abc</div>
</template>
<script>
let item1

export default {
    data(): return{},
    methods: {
        function f1(){
            item1 = value1;
        },
        function f2(){
            const item2 = item1;
            console.log(item2);
        }
    },
    mounted: {
        this.f1();
        this.f2();
    }
}
</script>

只是避免使用const 来声明另一个局部变量item1，该变量仅在该方法中可用。你会没事的。

【讨论】：

【解决方案3】：

let item1;

function f1() {
  item1 = "value1";
}

function f2() {
  const item2 = item1;
  console.log(item2);
}
f1();
f2();

您必须声明一个全局变量才能在不同的函数中使用它。

【讨论】：

是的，它可以在纯 JS 中运行，但在 vue.js 中存在问题。我可以看到这个 sn-p 中的逻辑，实际上我之前在我的 vue 应用程序中尝试过这种方式，但没有奏效。在 vue 脚本中声明变量的正确位置在哪里？在我启动脚本后声明它之前，以及方法部分中的函数methods: {}，但仍然无法读取该值。

【解决方案4】：

在数据上定义您的 var "item1" 并在任何函数中使用它，请参阅此示例

<script>
 export default {
data() {
    return {
        item1: ''
    };
},
methods: {
    f1() {
         this.item1 = value1;
    },
    f2() {
        const item2 = this.item1;
        console.log(item2);
    }
  }
 };
</script>

【讨论】：

【解决方案5】：

这段代码完美运行，我通过使用第一个函数调用第二个函数来激活它。

export default {
  data(): return{},
  methods: {
    f1(){
      const item1 = value1;
      this.f2(item1)
    },
    f2(item1){
      const item2 = item1;
      console.log(item2);
    }
  },
  mounted: {
    this.f1();
  }
}

【讨论】：