Question

我正在从JS文件导出值，并在Vue中使用它。我会像在模板中那样显示该值，但我也想在模板之外的其他地方使用此值。

这是我的设置的简化版本以及我想要实现的目标：

在我的 myJS.js 中（在实际应用中，此文件用于调用我的API）：

    const appService = {
      getPosts() {
         return 123456;
      }
    }

    export default appService

然后我有一个 VUE组件，如下所示：

    <template>
        {{ info }}
    </template>

    alert(info);

    import appService from '../myJS'

    export default {
      name: 'myvue',
      props: {
        msg: String
      },
      data () {
          return {
            info: {}
         }
      }
    async created () {
  this.info = await appService.getPosts();
   }
}

该值显示在模板中，但是alert（info）触发“未定义信息”错误。

如何在模板之外的普通JavaScript中使用此值？

希望如此。

谢谢！

Answer 1

基本上有两种方法：

将值分配给文件内部但组件定义外部的变量。因此，在您的示例中，您将说let info;，而在您的created()钩中，您会说this.info = info = await appService.getPosts()。
在导出组件之前将组件本身分配给变量：

const myComponent = { component definition... }

// Access with myComponent.info

export default myComponent;

但是！您将看到myComponent.info最初是undefined。并且与模板中的不同，info的值在异步调用解析后不会进行反应性更新。反应性魔术仅在模板和实际组件的代码中有效，例如在computed和watch属性中。如何优雅地处理异步加载的细节实际上取决于您要如何使用此变量的细节。

最后：之所以不能在整个.vue文件中访问该变量，是因为在后台，模板编译为在组件上下文中执行的函数。为了方便起见，组件的所有字段随后都可以作为变量使用，而没有通常的this前缀。实际上，在您的模板中，info被视为this.info的简写。（注意，可以用模板中的this.info代替info，它仍然可以使用。）此特权不适用于文件中的任何其他代码；这些东西只是普通的js代码。

在Vue <template>之外使用时未定义变量

1 个答案: