在 Vue 2 中，如果你引入一个 JavaScript 文件，并希望在模板中使用该文件中的变量，通常有几个常见的问题和解决方法：
1. 作用域问题
在 Vue 模板中，只能访问到 Vue 实例中的数据和方法，而无法直接访问外部引入的 JavaScript 文件中的变量。这是因为 Vue 的模板只能访问到 Vue 实例暴露出来的数据和方法，它并不直接操作或者引入外部的 JavaScript 文件。
2. 解决方法
方法 1：将变量设置为 Vue 实例的数据
你可以将 JavaScript 文件中的变量设置为 Vue 实例的数据，这样模板就可以访问到这些数据了。
// external.js
export const myVariable = 'Hello from external JavaScript';
// Vue component
<template>
<div>
<p>{{ externalVariable }}</p>
</div>
</template>
<script>
import { myVariable } from './external.js';
export default {
data() {
return {
externalVariable: myVariable
};
}
};
</script>
方法 2：通过方法访问
如果变量是一个方法，你可以在 Vue 实例中调用这个方法来获取返回值。
// external.js
export function getExternalData() {
return 'Hello from external JavaScript';
}
// Vue component
<template>
<div>
<p>{{ getExternalData() }}</p>
</div>
</template>
<script>
import { getExternalData } from './external.js';
export default {
methods: {
getExternalData
}
};
</script>
方法 3：直接使用全局变量（不推荐）
如果非常必要，你也可以将变量设置为全局变量，但这种做法不推荐，因为它破坏了模块化和封装性。
// external.js
window.myGlobalVariable = 'Hello from global variable';
// Vue component
<template>
<div>
<p>{{ window.myGlobalVariable }}</p>
</div>
</template>
<script>
export default {
mounted() {
console.log(window.myGlobalVariable); // 可以直接访问全局变量
}
};
</script>
