在外部 .js 文件中使用 .vue 组件时如何使用相同的变量？答案

【问题标题】：How to use the same variable when using .vue component in external .js files?在外部 .js 文件中使用 .vue 组件时如何使用相同的变量？
【发布时间】：2019-03-21 10:33:35
【问题描述】：

我有一个 .vue 单文件组件，它有太多行，所以我试图将它分成 .js 文件。我可以在thread 的帮助下实现这一目标。

但是，当我尝试使用来自不同文件的变量时，我仍然卡住了。

所以，这就是旧的foobar.vue 的样子

foobar.js

<script>
let foo; // there is one global variable (somehow I have to do this way)

export default {
  data() {
    return {
      bar: [1, 2, 3, 4],
    }
  },
  methods: {
    baz() {
      foo = 'some text';
      this.bar.push(5);
    },
    qux() {
      foo += 'lorem ipsum';
      this.bar.shift(0);
    },
  }
}
</script>

现在，我分成两个文件，baz.js，qux.js，它们看起来像这样：

foobar.vue

<script src="@/baz.js"></script>
<script src="@/qux.js"></script>
<script>
import { baz } from '@/baz';
import { qux } from '@/qux';

let foo; // I want to manipulate this from external files

export default {
  data() {
    return {
      bar: [0, 1, 2, 3], // I also want to manipulate this from external files
    }
  },
  methods: {
    baz,
    qux,
  }
}
</script>

baz.js

function baz() {
  foo = 'some text'; //foo undefined
  this.bar.push(5); //this.bar undefined
}

export { baz };

qux.js

function qux() {
  foo += 'lorem ipsum'; // foo undefined
  this.bar.shift(0); //this.bar undefined
}

export { qux };

显然，它不起作用，因为baz() 和qux() 看不到foo 和this.bar（在data() 中）。那么，我应该怎么做才能看到和操作foo 和bar？

谢谢！

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

你应该看看Mixins。

这是一个您可以尝试的简单示例：

// mixin.js
export default {
    data() {
        return {
            mixinData: 1
        }
    },
    methods: {
        printMixinData() {
            console.log(this.mixinData)
        },
        printDataFromVueFile() {
            console.log(this.vueData)
        }
    }
}

// YourVueFile.vue
<template>
    <input type="button" @click="printMixinData" value="Print Mixin Data">
    <input type="button" @click="printDataFromVueFile" value="Print value from .vue File">
</template>

<script>
    import myMixin from './mixin.js'
    export default {
        mixins: [myMixin], // important line here
        data() {
            return {
                vueData: 2
            },
        }   
    }
</script>

【讨论】：

【解决方案2】：

使用window.foo - 在全局范围内存储变量
或添加common.js 文件并添加：

export var foo;

并在 baz.js 和 qux.js 中导入它们

import { foo } from "./common.js"

【讨论】：

【解决方案3】：

嗯，Vue 提供了$root 实例来访问全局级别的变量和方法。此外，该实例也是反应式的。

假设您的两个组件 foo 和 bar 都绑定到名为 App 的主组件。

现在在App 组件的数据对象中定义一个变量。

为了从 App 组件访问数据，您可以从 Vue 的 $root 访问它。

const Foo = {
  template: '<span> {{this.$root.foo}} {{this.$root.from}} </span>'
};

const Baz = {
  template: '<span> {{this.$root.baz}} {{this.$root.from}} </span>'
};

new Vue({
  el: '#app',
  data: {
    foo: 'Foo',
    baz: 'Baz',
    from: 'from app component'
  },
  components: {
    Foo,
    Baz
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <Foo></Foo>
  <br />
  <Baz></Baz>
</div>

注意：$root 可用于 .vue 文件

希望这会有所帮助！

【讨论】：