js文件引用vue变量

在JavaScript文件中引用Vue.js中的变量，你需要确保这两个文件在同一作用域内，或者使用Vue实例暴露变量。以下是两种常见的做法：

1. **在Vue组件内部引用**：
如果你在Vue组件的`data`、`computed`、或者`methods`中定义了变量，你可以直接在组件内的任何地方访问。例如：

   // 在.vue文件中
   export default {
     data() {
       return {
         myVariable: 'Hello Vue'
       };
     },
     methods: {
       getMyVariable() {
         console.log(this.myVariable);
       }
     }
   }

   // 在另一个js文件中，假设已经创建了一个Vue实例并挂载到DOM上
   import MyComponent from './MyComponent.vue';
   const app = new Vue({
     el: '#app',
     components: { MyComponent },
   });

   // 现在可以在MyComponent外部的js文件中访问myVariable
   app.getMyVariable(); // 输出 'Hello Vue'

2. **通过Vue实例暴露变量**：
如果变量不在组件内部，而是你想在全局范围内共享，可以在`created`或`mounted`钩子里将变量添加到Vue实例的`$data`属性：

   // 在.vue文件中
   export default {
     created() {
       this.$root.myGlobalVariable = 'This is a global variable';
     }
   }

   // 在js文件中
   const app = new Vue({
     el: '#app',
     components: { /* ... */ },
   });

   // 访问全局变量
   console.log(app.myGlobalVariable); // 输出 'This is a global variable'

注意，在实际项目中，尽量避免全局变量，使用Vuex或事件总线等官方推荐的方式管理状态。